Toolypet
Back to Blog
CSS

CSS Gradient 기초: Linear, Radial, Conic 완벽 가이드

CSS 그라데이션의 세 가지 유형을 이해하고 아름다운 배경을 만드는 방법을 알아봅니다.

Toolypet Team4 min read
CSS Gradient 기초: Linear, Radial, Conic 완벽 가이드

CSS Gradient의 세계로 오신 것을 환영합니다

웹 디자인의 역사에서 그라데이션만큼 극적인 변화를 가져온 기술도 드물 것입니다. 한때는 포토샵에서 이미지를 만들어 배경으로 사용해야 했던 아름다운 색상 전환 효과를, 이제는 단 한 줄의 CSS 코드로 구현할 수 있게 되었습니다. CSS Gradient는 두 개 이상의 색상 사이에서 부드러운 전환을 만들어내는 강력한 기능으로, 현대 웹 디자인에서 없어서는 안 될 필수 도구가 되었습니다.

그라데이션의 가장 큰 장점은 성능입니다. 이미지 파일을 사용하면 추가적인 HTTP 요청이 발생하고 파일 용량만큼 로딩 시간이 늘어나지만, CSS Gradient는 브라우저가 실시간으로 렌더링하기 때문에 파일 크기가 사실상 0에 가깝습니다. 또한 어떤 해상도에서도 완벽하게 선명하게 표시되므로, 레티나 디스플레이 시대에 더욱 빛을 발합니다.

세 가지 Gradient 유형의 특징과 활용

CSS에서는 세 가지 종류의 그라데이션을 제공합니다. 각각의 특성을 이해하면 상황에 맞는 최적의 효과를 선택할 수 있습니다.

Linear Gradient: 직선의 우아함

선형 그라데이션은 가장 널리 사용되는 형태입니다. 이름 그대로 직선 방향으로 색상이 부드럽게 전환되며, 버튼, 배경, 오버레이 등 다양한 요소에 적용할 수 있습니다.

background: linear-gradient(90deg, #667eea, #764ba2);

각도를 지정할 때 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로 색상이 변합니다. 직관적으로 이해하기 어렵다면 to right, to bottom, to top left 같은 방향 키워드를 사용해도 됩니다. 개인적으로는 135deg 각도를 자주 사용하는데, 왼쪽 위에서 오른쪽 아래로 흐르는 대각선 그라데이션이 자연스러우면서도 역동적인 느낌을 주기 때문입니다.

Radial Gradient: 중심에서 퍼져나가는 빛

원형 그라데이션은 마치 스포트라이트처럼 중심점에서 바깥쪽으로 색상이 퍼져나갑니다. 배경에 깊이감을 더하거나, 버튼에 눌린 효과를 주고 싶을 때 특히 유용합니다.

background: radial-gradient(circle at center, #667eea, #764ba2);

circle은 완벽한 원형을, ellipse는 요소의 비율에 맞는 타원형을 만듭니다. 중심점 위치도 자유롭게 지정할 수 있어서, at top left로 왼쪽 상단에서 빛이 비추는 효과를 연출하거나, at 30% 70%처럼 정확한 좌표를 지정할 수도 있습니다.

Conic Gradient: 회전하는 색상의 향연

원뿔형 그라데이션은 CSS에서 가장 나중에 추가된 유형으로, 중심점을 기준으로 시계 방향으로 회전하면서 색상이 변합니다. 처음에는 낯설게 느껴질 수 있지만, 이 특성을 이해하면 파이 차트나 색상 휠 같은 효과를 순수 CSS만으로 구현할 수 있습니다.

background: conic-gradient(from 0deg, red, yellow, green, blue, red);

시작 색상과 끝 색상을 동일하게 지정하면 매끄럽게 연결되는 원형 그라데이션을 만들 수 있습니다. 이 기법으로 로딩 스피너나 진행률 표시기도 만들 수 있어서, 알아두면 여러모로 쓸모가 많습니다.

Color Stop으로 섬세하게 제어하기

기본적으로 그라데이션의 색상들은 균등하게 분배됩니다. 하지만 때로는 특정 색상이 더 넓은 영역을 차지하거나, 급격한 전환이 필요한 경우가 있습니다. 이때 Color Stop을 사용하면 각 색상의 위치를 정밀하게 제어할 수 있습니다.

background: linear-gradient(
  90deg,
  #667eea 0%,
  #667eea 30%,
  #764ba2 70%,
  #f97316 100%
);

위 예제에서 첫 번째 색상은 0%부터 30%까지 유지되다가 그 이후부터 두 번째 색상으로 전환됩니다. 같은 색상을 연속으로 지정하면 해당 구간에서는 색상 변화 없이 단색으로 유지됩니다. 이 기법을 활용하면 하드 에지 그라데이션(색상이 급격하게 바뀌는 효과)도 구현할 수 있습니다.

실전에서 바로 쓸 수 있는 예제들

이론을 배웠으니 이제 실제로 활용해볼 차례입니다. 가장 흔하게 사용되는 두 가지 패턴을 소개합니다.

세련된 그라데이션 버튼

플랫 디자인이 대세인 요즘에도 그라데이션 버튼은 여전히 사랑받고 있습니다. CTA(Call-to-Action) 버튼처럼 사용자의 시선을 끌어야 하는 요소에 특히 효과적입니다.

.gradient-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gradient-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}

hover 효과로 약간 위로 떠오르는 듯한 애니메이션과 그림자를 추가하면, 버튼이 살아 움직이는 것처럼 느껴집니다.

눈길을 사로잡는 텍스트 그라데이션

히어로 섹션의 타이틀이나 브랜드 로고에 그라데이션을 적용하면 강렬한 인상을 줄 수 있습니다. 약간의 트릭이 필요하지만 결과물은 인상적입니다.

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

배경을 텍스트 영역에만 클리핑하고 텍스트 색상을 투명하게 만드는 방식입니다. 모든 모던 브라우저에서 잘 동작하며, 특히 큰 제목에 적용했을 때 효과가 극대화됩니다.

마무리하며

CSS Gradient는 단순해 보이지만 무궁무진한 가능성을 품고 있습니다. 오늘 배운 세 가지 유형의 기본 개념만 확실히 이해하면, 조합과 응용을 통해 어떤 디자인이든 구현해낼 수 있습니다. Toolypet의 Gradient Generator를 활용하면 복잡한 문법을 외우지 않아도 실시간으로 결과를 확인하며 원하는 그라데이션을 만들 수 있으니, 꼭 한번 사용해보시기 바랍니다.

다음 글에서는 그라데이션에 애니메이션을 적용하여 더욱 역동적인 효과를 만드는 방법을 다뤄보겠습니다. 배경이 살아 움직이는 웹사이트, 기대되지 않으시나요?

CSSGradientBackgroundDesign
Back to all posts