color
Conic gradient
also called angular gradient (community), sweep gradient (android), pie gradient (community)
A gradient whose colours sweep around a centre point like a clock hand rather than along a line, the shape behind pie charts, colour wheels and progress rings.
CSS draws gradients three ways, and the difference is only which geometry the
stops are laid along. Linear runs them down an axis, radial runs them outward from a point,
and conic runs them around one: the colour at any pixel is decided by the angle from the
centre to that pixel, so the fill sweeps like a clock hand. Two arguments steer it. from
rotates the starting angle, which is almost always what you want when the seam lands
somewhere ugly, and at moves the centre off the middle of the box. Positions on a
colour stop are read as angles or as percentages of one full turn, so 25%
and 90deg are the same place.
The trick that made conic gradients famous is the hard edge. Two stops pinned at the same
position leave no room to blend, so conic-gradient(#3557e8 0 42%, #7aa2f7 42% 68%, ...)
draws four flat slices and you have a pie chart with no SVG, no library, and no elements.
The same trick plus a radial mask punching out the middle is a donut, which is how a
progress ring is usually painted. Be honest about what that gets you: it
is paint, not data. A chart built this way carries no labels, no values, and nothing a
screen reader can read, so the numbers have to exist somewhere in the markup as well, and
the slices need to differ by more than hue for anyone reading them without colour.
The smooth version has its own uses. A colour wheel is a conic sweep through every hue with the last stop repeating the first, which is the only way to close the loop without a visible seam. A conic behind a border box is where gradient borders get their rotating shimmer. And a conic under a mask is the shape most “sweep” spinners are, because the fade around the circle falls out of the geometry rather than being drawn frame by frame.
Two things bite. The sweep gets wider in pixels as it moves away from the centre, so a shallow ramp shows colour banding at the outer edge long before it does near the middle, and the fix is more chroma variation or a grain layer rather than blur. And interpolation still matters: a conic from blue to yellow travels through the same muddy midpoint any other gradient does unless you name a better space to blend in.
Which word?
| If you want | say |
|---|---|
| colours sweeping around a centre instead of across a line | conic gradient |
| a fill that changes colour across its own area | gradient |
| a soft multi-point colour blend, not a straight ramp | mesh gradient |