CSS 그래디언트 가이드: 선형, 원형, 원뿔형 패턴

CSS 그래디언트는 이미지 없이 색상 간 부드러운 전환을 만들어, HTTP 요청 제로, 무한 확장성, 작은 파일 크기를 제공합니다. 최신 CSS는 세 가지 그래디언트 유형을 지원하며, 각각 강력한 구성 옵션을 가지고 있습니다. 이 가이드에서는 즉시 사용할 수 있는 실용적인 예시와 함께 모두 다룹니다.

선형 그래디언트

가장 일반적인 유형으로, 직선을 따라 전환됩니다:

/* 위에서 아래로 (기본값) */
background: linear-gradient(#3B82F6, #8B5CF6);

/* 각도 지정 */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* 방향 키워드 */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

색상 정지점

각 색상이 나타나는 위치를 제어합니다:

/* 균등 분배 (기본값) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* 사용자 정의 위치 */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* 하드 정지점 (전환 없음) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

다중 정지점 그래디언트

복잡한 색상 전환을 만듭니다:

/* 석양 그래디언트 */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* 무지개 */
background: linear-gradient(
  90deg,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

그래디언트 생성기로 선형 그래디언트를 시각적으로 만들어보세요 — 색상, 각도, 정지점을 실시간으로 조정할 수 있습니다.

원형 그래디언트

중심점에서 바깥으로 퍼져나갑니다:

/* 중심에서 원형 */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* 타원형 (기본 형태) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* 사용자 정의 위치 */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

크기 키워드

/* closest-side: 가장 가까운 가장자리까지 */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: 가장 먼 모서리까지 (기본값) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* 명시적 크기 */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

원뿔형 그래디언트

파이 차트처럼 중심점 주위를 회전합니다:

/* 기본 원뿔형 */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* 파이 차트 세그먼트 */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* 특정 각도에서 시작 */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* 사용자 정의 중심 */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

반복 그래디언트

세 가지 유형 모두 반복 패턴을 지원합니다:

/* 줄무늬 패턴 */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* 동심원 링 */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* 체크보드 (원뿔형 사용) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

여러 그래디언트 겹치기

CSS는 다중 배경을 지원하여 복잡한 효과를 가능하게 합니다:

/* 이미지 위에 그래디언트 오버레이 */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* 교차 해치 패턴 */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

실용적인 UI 패턴

그래디언트 텍스트

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

그래디언트 테두리

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

애니메이션 그래디언트 배경

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

성능 고려사항

그래디언트는 GPU 가속되며 성능이 좋습니다:

그래디언트는 동등한 이미지보다 빠르게 렌더링됩니다
background-size는 렌더링 비용에 영향을 미칩니다 — 작은 타일이 더 저렴합니다
그래디언트 색상을 직접 애니메이션하지 마세요 — 대신 background-position을 애니메이션하세요
많은 정지점이 있는 복잡한 그래디언트도 여전히 PNG보다 빠릅니다

브라우저 지원

모든 최신 브라우저가 선형, 원형, 원뿔형 그래디언트를 지원합니다. 원뿔형 그래디언트가 가장 새로우며, 2020년부터 모든 주요 브라우저에서 지원됩니다 (Chrome 69+, Firefox 83+, Safari 12.1+). 어떤 그래디언트 유형에도 벤더 프리픽스가 필요하지 않습니다.

자주 묻는 질문

탁해 보이는 두 색상 간에 부드러운 그래디언트를 만들려면 어떻게 하나요?

탁한 그래디언트는 색상 휠에서 회색을 통과하는 색상 간 전환 시 발생합니다. 해결책: 중간 지점에 더 밝은 색조의 색상 정지점을 추가하거나, 지각적으로 균일한 전환을 위해 oklch 색상 공간을 사용하거나 (linear-gradient(in oklch, ...)), 중간 지점 색상의 채도를 높이세요.

그래디언트가 배경 이미지를 대체할 수 있나요?

추상 패턴, 오버레이, 장식적 배경에는 확실히 가능합니다. 그래디언트는 로드 시간이 제로이고, 완벽하게 확장되며, HTTP 요청이 필요 없습니다. 복잡한 시각 효과나 사진에는 여전히 이미지가 필요합니다. 많은 현대 디자인은 둘 다를 결합합니다: 배경 이미지 위에 그래디언트 오버레이.