← Home

Gradient

conic-gradient와 radial-gradient를 겹쳐 메시 그라디언트를 만든다. 색상 포인트와 애니메이션 속도를 실시간으로 제어한다.

hue shift: 0°● animating

color points

#7c3aed
#ea580c
#0891b2
#16a34a

animation

30

live css

background:
  radial-gradient(ellipse at 0% 0%,
    hsl(262, 83%, 58%) 0%,
    transparent 60%),
  radial-gradient(ellipse at 100% 0%,
    hsl(21, 90%, 48%) 0%,
    transparent 60%),
  radial-gradient(ellipse at 100% 100%,
    hsl(192, 91%, 36%) 0%,
    transparent 60%),
  radial-gradient(ellipse at 0% 100%,
    hsl(142, 76%, 36%) 0%,
    transparent 60%),
  conic-gradient(from 0deg at 50% 50%,
    hsl(262, 83%, 43%) 0%,
    hsl(192, 91%, 21%) 50%,
    hsl(262, 83%, 43%) 100%);

이 실험에 대해

메시 그라디언트는 여러 radial-gradient를 각 모서리에 배치하고 conic-gradient를 기반 레이어로 깔아 만든다. CSS background 속성에 쉼표로 여러 그라디언트를 나열하면 자동으로 위에서 아래로 겹쳐진다. 애니메이션은 requestAnimationFrame으로 hue 값을 매 프레임 조금씩 시프트하여 구현한다.

핵심 코드

/* 여러 그라디언트를 background에 쌓기 */
background:
  radial-gradient(ellipse at 0% 0%, hsl(270, 80%, 50%) 0%, transparent 60%),
  radial-gradient(ellipse at 100% 0%, hsl(28, 90%, 50%) 0%, transparent 60%),
  radial-gradient(ellipse at 100% 100%, hsl(200, 85%, 45%) 0%, transparent 60%),
  radial-gradient(ellipse at 0% 100%, hsl(130, 70%, 35%) 0%, transparent 60%),
  conic-gradient(from 0deg at 50% 50%, hsl(270, 80%, 35%) 0%, hsl(200, 85%, 30%) 50%, ...);

/* hue 시프트로 애니메이션 */
function tick(timestamp) {
  hueRef.current = (hueRef.current + delta * 0.05) % 360
  setHueShift(hueRef.current)
  requestAnimationFrame(tick)
}