CSS Conic Gradient Generator (Pie Charts, Color Wheels)
Conic gradients spin around a center point — perfect for pie charts, donut charts, color wheels, and avatar rings. This generator lets you stack color stops with specific angles and produces ready-to-use CSS.
Color stops (at angles)
Preview (donut style)
CSS
How to use the CSS Conic Gradient Generator (Pie Charts, Color Wheels)
Add color stops with their starting angle. Stack them clockwise from the start angle. The preview is rendered as a circle to show the gradient effect.
Conic gradients for charts and wheels
A conic gradient sweeps colors around a center point rather than along a line, which makes it the natural CSS tool for anything circular and segmented: pie and donut charts, color wheels, progress rings, and avatar borders. The syntax — conic-gradient() with stops placed at specific angles and an optional from start angle and center position — is exact but awkward to write by hand.
Set a start angle and center, stack color stops at the angles you want, and copy the CSS, with a donut-style preview rendering the result. This tool specialises in conic output; for linear and radial gradients, or to switch between all three types in one builder, use the general gradient generator.
Common use cases
- Pie and donut charts — render segments purely in CSS with angled stops.
- Color wheels — sweep the full hue range around the center.
- Progress rings — show a filled arc against a track color.
- Avatar borders — add a multi-color spun ring around a profile image.
- Conic backgrounds — create a radial-spoke decorative panel.