코닉 그라데이션

Conic gradient

중심에서 각도를 따라 색이 바뀌는 그라데이션. 색상환·로딩 스피너·진행률 링에 씁니다.

다른 이름: Angular gradientColor wheel gradient

···

html

<div class="wheel"></div><div class="ring" id="ring"><div class="hole"></div></div>

css

.wheel{width:110px;height:110px;border-radius:50%;position:absolute;left:16%;
  background:conic-gradient(from 0deg,#ff2d55,#ffb648,#f5e663,#18c29c,#22d3ee,#5b5bf7,#a855f7,#ff2d55);
  animation:spin 8s linear infinite}
.ring{width:90px;height:90px;border-radius:50%;position:absolute;right:16%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) var(--p,0deg),var(--line) var(--p,0deg))}
.hole{width:64px;height:64px;border-radius:50%;background:var(--bg)}
@keyframes spin{to{transform:rotate(360deg)}}

const ring = document.getElementById('ring');
let p = 0;
function loop() { p = (p + 2) % 360; ring.style.setProperty('--p', p + 'deg'); requestAnimationFrame(loop); }
loop();

linear-gradient 는 방향을 따라, radial-gradient 는 중심에서 바깥으로 색이 바뀌지만, conic-gradient 는 각도(0~360deg)를 따라 바뀝니다. HSL 색상환을 그대로 표현할 수 있는 유일한 CSS 그라데이션입니다.

from 각도와 at 위치를 지정할 수 있습니다. 진행률 링처럼 값 하나만 채웠다 비웠다 할 때는 JS 로 커스텀 프로퍼티(--p)를 매 프레임 갱신하는 게 가장 간단합니다.

언제 쓰나

로딩 스피너, 색상 피커, 진행률 링(progress ring)에 씁니다. 파이 차트로 쓸 땐 각도 정보를 텍스트로도 함께 제공해 접근성을 챙기세요.