Conic gradient

코닉 그라데이션

A gradient that changes colour by angle around a centre point — used for colour wheels, spinners, and progress rings.

Also known as: 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 changes colour along a direction and radial-gradient from a centre outward, but conic-gradient changes colour by angle (0–360deg) — the only CSS gradient that can render a true HSL colour wheel.

You can set a from angle and an at position. For something like a filling progress ring, the simplest approach is updating a custom property (--p) with JS every frame.

When to use

Use for loading spinners, colour pickers, progress rings. If used as a pie chart, also expose the angle data as text for accessibility.