Jakub의 Understanding Gradients를 번역한 글입니다.

그라디언트에 대한 이해

그라데이션이 어떻게 동작하는지, 색상 모델이 그라데이션에 어떤 영향을 미치는지, 그리고 왜 어떤 그라데이션은 다른 것보다 더 아름답게 보이는지 깊이 있게 파헤친 글입니다.

그라데이션이란 무엇일까?

우리는 매일 그라데이션을 사용하고 있고, 겉보기에는 꽤 단순해 보이지만 그 안에는 놀라울 정도로 많은 복잡성이 숨어 있습니다. 또한 그라데이션을 가지고 할 수 있는 흥미로운 일들도 정말 많습니다.

그라데이션은 두 가지 이상의 색상 사이에서 부드럽게 전환되는 흐름을 말합니다. CSS에서는 그라데이션이 컬러 스톱(color stop) 으로 정의되는데, 이는 각 색상이 시작하고 끝나는 지점을 나타내는 기준점입니다. 이 지점들을 기준으로 색상은 수학적으로 혼합되며, 이를 보간(interpolation) 이라고 부릅니다.

그라데이션 유형

그라데이션에는 세 가지 주요 종류가 있습니다: 선형(linear), 원형(radial), 그리고 원뿔형(conic) 그라데이션입니다.

선형 그라데이션(Linear Gradients)

가장 흔하게 사용되는 그라데이션 유형은 선형(linear) 입니다. 이 방식은 색상을 직선 방향으로 자연스럽게 섞어 주기 때문에 비교적 이해하기도 쉽습니다.

기본적으로 그라데이션은 위에서 아래로 흐르지만, 우리는 방향, 컬러 스톱, 심지어 반복 여부까지 직접 제어할 수 있습니다.

element {
  background: linear-gradient(to bottom, blue, red);
}

방향과 각도(Direction and Angle)

그라데이션의 방향은 키워드나 각도 값을 사용해 정의할 수 있습니다. 각도는 시계 방향(clockwise) 으로 회전하며 적용됩니다.

키워드로는 top, left, right, bottom 등이 있으며, 이 키워드들을 조합해서 to bottom right 같은 방식으로 더욱 세부적인 방향을 지정할 수도 있습니다.

element {
  background: linear-gradient(45deg, blue, red);
}

컬러 스톱(Color Stops)

색상이 어디서 시작하고 어디서 끝나는지 정확하게 제어할 수 있도록, 개별 컬러 스톱을 정의할 수 있습니다.

element {
  background: linear-gradient(to bottom, blue 25%, red 75%);
}

같은 위치에 두 개의 컬러 스톱을 배치하면, 그 지점에서 날카로운 경계(sharp edge) 가 생성됩니다.

element {
  background: linear-gradient(to bottom, blue 50%, red 50%);
}

반복(Repeating)

그라데이션을 반복(repeat) 하고 싶다면 repeating 타입을 사용할 수 있습니다. 이 기능은 패턴이나 질감(texture) 을 만들 때 특히 유용합니다.

element {
  background: repeating-linear-gradient(45deg, blue 0 10px, red 24px 20px);
}

다이아몬드 그라데이션(Diamond Gradient)

Figma 같은 일부 디자인 도구에는 다이아몬드 그라데이션이라는 타입도 있는데, 이는 정사각형 형태로 바깥 방향으로 퍼져나가는 방식의 그라데이션입니다.

이 효과는 네 개의 선형 그라데이션(linear gradient) 을 겹쳐 만드는 방식으로 구현됩니다. 각 그라데이션은 요소의 네 모서리에 각각 배치되며, 요소의 1/4 영역을 덮도록 크기가 지정됩니다. 참고로 Diamond(다이아몬드) 는 CSS에 존재하는 공식 그라데이션 유형이 아닙니다.

element {
  background:
    linear-gradient(to bottom right, #fff 0%, #999 50%) bottom right / 50% 50%
      no-repeat,
    linear-gradient(to bottom left, #fff 0%, #999 50%) bottom left / 50% 50%
      no-repeat,
    linear-gradient(to top left, #fff 0%, #999 50%) top left / 50% 50% no-repeat,
    linear-gradient(to top right, #fff 0%, #999 50%) top right / 50% 50%
      no-repeat;
}

방사형 그라데이션(Radial Gradient)

방사형 그라데이션은 중심점에서 바깥 방향으로 퍼져나가는 형태입니다. 빛 번짐(glow), 배경, 깊이감을 주는 조명 효과 등을 만들 때 매우 유용하게 사용할 수 있습니다.

element {
  background: radial-gradient(blue, red);
}

모양(Shape)

방사형 그라데이션에서는 두 가지 모양, 즉 원(circle) 과 타원(ellipse) 을 정의할 수 있습니다. 두 모양의 차이는 circle은 항상 1:1 비율을 유지하는 반면, ellipse는 컨테이너의 비율에 따라 늘어나거나 줄어든다는 점입니다.

element {
  background: radial-gradient(circle, blue, red);
}

크기 키워드(Size Keywords)

그라데이션이 얼마나 멀리까지 확장될지도 제어할 수 있습니다. 사용할 수 있는 값은 다음과 같습니다: closest-side, closest-corner, farthest-side, farthest-corner

이는 중심점으로부터 마지막 컬러 스톱에 도달할 때까지 그라데이션이 얼마나 멀리 확장될지를 결정하는 값입니다. 크기 키워드를 별도로 지정하지 않으면 기본값은 farthest-corner 입니다.

element {
  background: radial-gradient(circle closest-side, blue, red);
}

위치(Position)

방사형 그라데이션에서 또 하나 제어할 수 있는 요소는 위치입니다. 그라데이션의 중심점을 원하는 위치로 이동시킬 수 있습니다.

기본값은 center이지만, 키워드, 퍼센트 값, 좌표값 등을 모두 사용할 수 있습니다.

element {
  background: radial-gradient(circle at 70% 30%, blue, red);
}

원뿔형 그라데이션(Conic Gradient)

원뿔형 그라데이션은 CSS에서 가장 최근에 추가된 그라데이션 유형입니다. 이 방식은 색상환의 조각처럼, 중심점을 기준으로 회전하며 색이 변화합니다.

이 그라데이션은 차트, 링 형태의 UI, 애니메이션 보더, 또는 더 복잡한 비주얼 효과를 만들 때 아주 유용합니다.

element {
  background: conic-gradient(blue, red);
}

시작 각도(Starting Angle)

다른 그라데이션 타입과 마찬가지로, 시작 각도를 원하는 대로 설정할 수 있습니다. 원뿔형 그라데이션에서는 컬러 스톱이 각도(angle)를 기준으로 배치되며, 각도는 도(degree) 단위로 정의됩니다.

각도를 따로 지정하지 않으면 기본값은 0deg입니다. 또한 원뿔형 그라데이션은 마지막 컬러 스톱 이후 자동으로 처음 컬러 스톱으로 되돌아가며 이어집니다.

element {
  background: conic-gradient(from 90deg, blue, red);
}

중심 위치(Center Position)

at 값을 사용하면 회전의 중심점을 원하는 위치로 옮길 수 있습니다.

값을 지정하지 않으면 기본값은 at 50% 50% 입니다.

element {
  background: conic-gradient(at 70% 30%, blue, red);
}

날카로운 경계(Hard Edges)

선형 그라데이션과 마찬가지로, 원뿔형 그라데이션에서도 날카로운 경계(sharp edges) 를 만들 수 있습니다.

element {
  background: conic-gradient(
    purple 0deg 120deg,
    red 120deg 240deg,
    blue 240deg 360deg
  );
}

반복(Repeating)

선형 그라데이션과 마찬가지로, 원뿔형(conic) 그라데이션도 반복시켜 패턴을 만들 수 있습니다.

각도의 deg 값, 반복 횟수, 그라데이션 구간 등을 조정해 독특한 시각 효과를 만들어낼 수 있습니다.

element {
  background: repeating-conic-gradient(
    from 0deg,
    #000 0deg 20deg,
    #fff 20deg 40deg
  );
}

그라데이션과 색공간(Gradients and Color Spaces)

위의 모든 예시는 웹의 기본 색공간인 sRGB 색공간을 사용했습니다. 하지만 그라데이션의 보간 방식(interpolation) 은 사용하는 색공간에 따라 달라질 수 있습니다.

색공간에 대해 더 자세히 알고 싶다면, 제가 작성한 OKLCH 색상에 관한 글을 참고해 보세요.

그라데이션을 정의할 때 색공간(color space)을 직접 지정하면, 더 최신 색상 모델을 사용할 수도 있습니다.

element {
  background: linear-gradient(in oklch, blue, red);
}

Tailwind에서도 색공간을 강제로 지정하여 동일한 방식으로 색상 모델을 사용할 수 있습니다. 참고로 Tailwind 4에서는 그라데이션의 기본 색공간이 oklab으로 설정되어 있습니다.

<div class="bg-linear-to-r/oklch from-red-500 to-blue-500" />

앞서 언급했듯이, 그라데이션은 결국 색상을 수학적으로 혼합한 결과물입니다. 그리고 색상이 어떻게 섞이는지는 그라데이션의 종류와 사용되는 색공간 두 가지에 의해 결정됩니다.

간단히 설명하면 다음과 같습니다. rgb는 색상을 직선(linear) 으로 보간하지만, 사용할 수 있는 색은 sRGB에만 한정됩니다. oklab도 색상을 직선 보간하지만, Display P3 색역을 사용할 수 있습니다.

반면 oklch는 색상을 직선이 아닌 ‘원(circle)’ 형태로 보간합니다. 이는 oklch에서 Hue(색상) 값이 각도(angular) 로 표현되기 때문이며, 마찬가지로 Display P3 색역도 지원합니다.

위 예시에서 보면, oklch 그라데이션은 rgb나 oklab과는 다르게 보입니다. 이는 보간 방식(interpolation)의 차이 때문입니다.

이 점은 양날의 검(double-edged sword) 과 같습니다. 어떤 그라데이션은 더 부드럽게 보일 수 있지만, 동시에 정의하지도 않은 색이 나타나는 현상도 발생할 수 있습니다.

컬러 힌트(Color Hints)

모던 CSS에서는 컬러 힌트(color hint)도 지원하는데, 이를 사용하면 두 색상의 중간 지점(midpoint)이 어디에 위치할지를 직접 제어할 수 있습니다. 이는 컬러 스톱을 설정하는 것과는 다른 개념입니다.

컬러 스톱(color stop)은 색상이 어디서 시작하고 어디서 끝나는지를 정의하는 반면, 컬러 힌트(color hint)는 그라데이션의 혼합 지점이 어디에 나타날지만을 정의합니다.

element {
  background: linear-gradient(to right, red 0%, blue 100%);
}

예를 들어, 이 그라데이션에서 빨간색은 0%, 파란색은 100% 위치에 고정되어 있습니다. 브라우저는 이 두 지점 사이를 선형(linear)으로 보간하여 색상을 섞습니다.

element {
  background: linear-gradient(to right, red 0%, green 50%, blue 100%);
}

중간 지점(midpoint)을 추가하면, 빨간색은 50%까지 유지되고, 초록색은 50%에서 시작해서 50%에서 끝나는 하나의 스톱(stop) 역할을 하게 됩니다. 그 이후에는 초록색에서 파란색까지 다시 보간됩니다.

element {
  background: linear-gradient(to right, red, 40%, blue);
}

컬러 힌트는 새로운 색을 정의하는 것이 아니라, 두 컬러 스톱 사이에서 색이 전환되는 지점을 제어합니다. 즉, 보간(interpolation)의 속도와 방식을 바꾸는 것이지, 컬러 스톱의 시작점이나 끝점(endpoints) 을 변경하는 것은 아닙니다.

마커는 중간 지점(midpoint)이 어디에 나타나는지를 보여줍니다. 힌트를 30%로 설정하면, 빨간색이 더 빨리 전환되고, 파란색이 그라데이션에서 더 넓은 영역을 차지하게 됩니다. 반대로 70%로 설정하면, 빨간색이 더 오래 유지되다가 이후에 파란색으로 전환됩니다.

또한 하나의 그라데이션 안에 여러 개의 힌트를 사용해 색상 보간이 어디에서 일어날지 완전히 제어할 수도 있습니다.

그라데이션 레이어링(Gradient Layering)

여러 개의 그라데이션을 겹쳐서(layer) 사용할 수도 있습니다. 이 방식은 매우 독특한 시각 효과를 만드는 데 유용합니다.

여기에 background-blend-mode를 함께 활용하면 그라데이션의 진짜 마법 같은 효과를 구현할 수 있습니다.

여러 개의 블렌드 모드를 함께 조합하면, 더 흥미롭고 독창적인 시각 효과를 만들 수 있습니다.

.layered-gradient {
  background:
    linear-gradient(
      in oklch 135deg,
      oklch(0.75 0.18 280),
      oklch(0.8 0.15 80),
      oklch(0.75 0.18 320)
    ),
    conic-gradient(
      in oklch from 180deg,
      oklch(0.7 0.12 200 / 0.3),
      oklch(0.7 0.12 340 / 0.3),
      oklch(0.7 0.12 200 / 0.3)
    );
  background-blend-mode: overlay, color-dodge;
}

성능(Performance)

모던 브라우저에서는 그라데이션이 GPU 가속을 통해 렌더링됩니다. 즉, 그라데이션 자체가 계속 재계산(recalculate) 되지 않는 한, position, angle, size 같은 속성은 매우 효율적으로 애니메이션 처리할 수 있습니다.

background-position, background-size, background-angle, opacity 같은 속성은 애니메이션 비용이 아주 저렴합니다.

반면, 컬러 스톱(color stops)을 애니메이션하거나, 그라데이션 레이어를 추가·삭제하거나, 그라데이션 유형을 변경하는 것은 상대적으로 비용이 더 큰 작업입니다.

만약 그라데이션을 애니메이션해야 한다면, 움직이는 오버레이(pseudo-element) 를 사용하거나, CSS 변수로 색을 간접적으로 전환하는 방식이 더 효율적입니다.

예를 들어, 제가 만든 로그인 다이얼로그(sign-in dialog) 컴포넌트에서는 패스키(passkey) 상태 애니메이션을 원뿔형(conic) 그라데이션을 애니메이션하는 방식으로 구현했습니다.

결론

그라데이션은 엄청나게 강력한 도구이며, 이를 활용해 독창적인 효과를 만들어낼 수 있는 가능성은 사실상 무한대에 가깝습니다. 이 글을 쓰기 전까지만 해도, 저 또한 여기서 다룬 여러 개념들을 제대로 알지 못했습니다.

만약 여러분이 독특한 방식으로 그라데이션을 활용한 멋진 예시를 가지고 있다면, 언제든지 jakub@kbo.sk 로 이메일을 보내주세요. 정말 기쁘게 살펴보겠습니다!