CSS 그라디언트 가이드: 선형, 방사형, 원뿔형, 메시 효과

선형 그라디언트

가장 일반적입니다. 색상이 두 점 사이의 직선을 따라 전환됩니다. 각도(또는 방향 키워드)가 그라디언트가 진행되는 위치를 제어합니다:

/* 각도 구문 */
background: linear-gradient(135deg, #7c5cfc, #ec4899);

/* 방향 키워드 (더 읽기 쉬움) */
background: linear-gradient(to right, #7c5cfc, #ec4899);
background: linear-gradient(to bottom right, #7c5cfc, #ec4899);

/* 여러 색상 정지점 */
background: linear-gradient(to right, #7c5cfc 0%, #ec4899 50%, #f59e0b 100%);

각도 규칙: 0deg는 위, 90deg는 오른쪽, 180deg는 아래, 270deg는 왼쪽을 가리킵니다. 기본 방향(각도 미지정)은 to bottom(180deg)입니다.

색상 정지점

각 색상은 "완전히" 그 색상이 되어야 하는 위치 백분율이나 길이를 지정할 수 있습니다. 그 사이의 정지점은 부드러운 전환을 유지합니다:

/* 선명한 색상 경계 (줄무늬처럼 보임) */
background: linear-gradient(to right, #7c5cfc 50%, #ec4899 50%);

/* 중간 유지가 있는 부드러운 전환 */
background: linear-gradient(to right, #7c5cfc 0%, #7c5cfc 20%, #ec4899 80%, #ec4899 100%);

방사형 그라디언트

색상이 한 점에서 원이나 타원으로 바깥으로 퍼집니다:

/* 기본값: 중앙의 타원 */
background: radial-gradient(#7c5cfc, transparent);

/* 모양과 위치 */
background: radial-gradient(circle at top left, #7c5cfc, transparent);
background: radial-gradient(ellipse at 30% 70%, #7c5cfc, transparent);

/* 명시적 반지름 */
background: radial-gradient(circle 200px at center, #7c5cfc, transparent);

스포트라이트 효과, 미묘한 분위기 배경, 버튼 발광 상태에 방사형 그라디언트를 사용하세요. 투명으로 사라지는 여러 겹친 방사형은 풍부한 "꿈같은" 페이지 배경을 만듭니다.

원뿔형 그라디언트

색상이 중심점 주위로 회전합니다 — 파이 차트처럼. 2020년경 브라우저에 추가됨:

/* 기본 원뿔형 (무지개 스윕) */
background: conic-gradient(red, yellow, green, blue, red);

/* 각도 + 위치에서 */
background: conic-gradient(from 45deg at center, #7c5cfc, #ec4899, #7c5cfc);

/* 파이 차트 */
background: conic-gradient(
  #7c5cfc 0deg 90deg,
  #ec4899 90deg 200deg,
  #f59e0b 200deg 360deg
);

그라디언트 텍스트

현대 웹 디자인의 모든 곳에 있는 "무지개 헤딩" 트릭:

.gradient-text {
  background: linear-gradient(135deg, #7c5cfc, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

요소가 그라디언트 배경을 받고, 배경이 텍스트 모양에만 클립되며, 텍스트 자체는 투명으로 설정되어 그라디언트가 보입니다. Safari를 위해 접두사가 있는 속성과 없는 속성을 모두 포함하세요.

메시 스타일 그라디언트

2021년 이후 인기 있는 흐릿한 다색 배경인 "메시 그라디언트"는 실제로 CSS 기능이 아닙니다. 투명으로 페이드되는 다층 방사형 그라디언트입니다:

.mesh-bg {
  background-color: #0a0a1a;
  background-image:
    radial-gradient(at 20% 30%, rgba(124, 92, 252, 0.4) 0px, transparent 50%),
    radial-gradient(at 80% 10%, rgba(236, 72, 153, 0.3) 0px, transparent 50%),
    radial-gradient(at 40% 90%, rgba(245, 158, 11, 0.3) 0px, transparent 50%),
    radial-gradient(at 90% 70%, rgba(16, 185, 129, 0.25) 0px, transparent 50%);
}

각 방사형은 투명으로 페이드되는 부드러운 색상 덩어리입니다. 다양한 위치와 색상에서 3-5개 쌓으면 "메시" 환상이 생깁니다.

애니메이션 그라디언트

CSS는 그라디언트 색상 정지점을 직접 애니메이션화하지 않습니다 — 컨테이너보다 큰 그라디언트의 위치를 애니메이션화해야 합니다:

.animated-gradient {
  background: linear-gradient(135deg, #7c5cfc, #ec4899, #f59e0b, #7c5cfc);
  background-size: 300% 300%;
  animation: shift 8s ease infinite;
}

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

색 공간: 최신 그라디언트가 더 좋아 보이는 이유

전통적 CSS 그라디언트는 sRGB 색 공간에서 보간됩니다. 최신 CSS는 더 부드럽고 더 생생한 전환을 위해 보간 색 공간 지정을 지원합니다:

/* 구식: 탁한 중간 색상을 만들 수 있음 */
background: linear-gradient(to right, blue, yellow);

/* 신식: 더 부드러운 지각적 보간 */
background: linear-gradient(in oklch to right, blue, yellow);
background: linear-gradient(in oklab to right, blue, yellow);

oklch와 oklab 색 공간은 지각적으로 균일한 전환을 만듭니다 — 파랑-노랑 그라디언트 중간에 탁한 회색 없음. 2023년부터 Chrome, Safari, Firefox에서 지원됩니다.

자주 묻는 질문

화면에서 그라디언트가 줄무늬처럼 보이는 이유는?

8비트 디스플레이에서 큰 영역의 그라디언트는 비슷한 색상 사이에 보이는 단계를 보입니다. 수정: background-image: url('noise.png'), linear-gradient(...)로 미묘한 노이즈 추가, 또는 더 부드러운 지각적 전환을 위해 oklch 색 공간 사용.

SVG 요소에 그라디언트를 사용할 수 있나요?

SVG에는 자체 그라디언트 구문이 있습니다(<defs>에 정의된 <linearGradient>와 <radialGradient>, fill="url(#id)"로 참조). CSS 그라디언트는 CSS 속성(background, border-image)에서만 작동하며 SVG fill에서는 작동하지 않습니다.

이미지 주위에 그라디언트 테두리를 만드는 방법은?

이미지를 패딩이 있는 div로 감싸고 위에 표시된 다층 배경 기법을 사용하세요. 또는 정사각 테두리에만 border-image를 사용하세요.

그라디언트 패턴을 반복할 수 있나요?

네 — 크기 범위 내의 색상 정지점과 함께 repeating-linear-gradient()나 repeating-radial-gradient()를 사용하세요. 클래식 사용: repeating-linear-gradient(45deg, #7c5cfc 0 10px, transparent 10px 20px)를 통한 줄무늬.

그라디언트가 피그마와 웹사이트에서 다르게 보이는 이유는?

피그마는 기본적으로 지각적으로 선형인 보간을 사용합니다. 브라우저 CSS(2023년 이전)는 sRGB 보간을 사용합니다. linear-gradient(in oklab to right, ...)를 사용하여 피그마의 모양과 일치시키세요 — 최신 브라우저에서 사용 가능.