conic-gradient 는 뭐가 다른가요?

linear 는 직선, radial 은 점 중심 원형. conic 은 중심점 기준 회전 — pie chart · spinner 만들 때 자주 사용. CSS 4 부터 모든 브라우저 지원.

정지점 사이 색상은 어떻게 보간되나요?

기본은 sRGB 선형 보간 — 가운데가 진흙처럼 어두워질 수 있어요. CSS 4 의 `in oklch` 같은 색 공간 지정으로 더 깨끗한 보간 가능 (예: `linear-gradient(in oklch, red, blue)`).

8비트 색 공간 한계 + 비슷한 명도 색상 사이 흔한 현상. 정지점을 더 추가하거나 약간의 noise dither (CSS filter / 이미지) 로 완화 가능.

예시

타입: linear
각도: 135°
정지점: #5b21b6 0%, #ec4899 50%, #f97316 100%

background: linear-gradient(
  135deg,
  #5b21b6 0%,
  #ec4899 50%,
  #f97316 100%
);

linear / radial / conic 3 타입 지원. 정지점은 add/remove 자유. CSS 코드 그대로 복사해 어디든 붙여 넣기 가능.

사용법 / 자주 묻는 질문

Q.conic-gradient 는 뭐가 다른가요?: A.linear 는 직선, radial 은 점 중심 원형. conic 은 중심점 기준 회전 — pie chart · spinner 만들 때 자주 사용. CSS 4 부터 모든 브라우저 지원.
Q.정지점 사이 색상은 어떻게 보간되나요?: A.기본은 sRGB 선형 보간 — 가운데가 진흙처럼 어두워질 수 있어요. CSS 4 의 `in oklch` 같은 색 공간 지정으로 더 깨끗한 보간 가능 (예: `linear-gradient(in oklch, red, blue)`).
Q.그라데이션이 banding 되어 보입니다.: A.8비트 색 공간 한계 + 비슷한 명도 색상 사이 흔한 현상. 정지점을 더 추가하거나 약간의 noise dither (CSS filter / 이미지) 로 완화 가능.

재미있는 사실

CSS3 의 `linear-gradient()` 는 2009년 W3C CSS Image Values Module Level 3 에 표준화됐습니다 — 그 전엔 PNG/SVG 이미지로 그라데이션을 박는 게 일반적이었어요. Mozilla 가 -moz-linear-gradient prefix 로 2008년 먼저 박았고, WebKit·Opera 가 따라가며 표준화에 합의.
W3C — CSS Image Values 3
`conic-gradient()` (CSS Image Values 4, 2018) 는 가장 늦게 추가된 그라데이션 — 중심에서 시계방향으로 색이 변하는 형태. 파이 차트·시계 디자인을 SVG·canvas 없이 순수 CSS 로 그릴 수 있어 게임 진행률 표시 같은 곳에 활용됩니다.
MDN — conic-gradient
CSS Color 4 (2024) 부터 그라데이션의 색 interpolation 을 `in oklch` 같은 perceptual color space 에서 수행 가능 — sRGB 보간보다 색 전환이 더 자연스럽고 회색 중간값 (muddy middle) 함정을 피합니다. `linear-gradient(in oklch, red, blue)` 형태.
W3C — CSS Color 4 interpolation