CSS conic-gradient Builder
Build a CSS conic-gradient — useful for pie charts and dials.
Overview
The CSS conic-gradient Builder generates a conic-gradient() value — colours rotated around a centre point — with stops, optional starting angle, and centre position. Live preview shows the result on a square element, which is the canvas conic gradients need to look right.
Useful for designers and developers building pie charts, donut progress indicators, colour wheels, or dial UI without SVG or canvas. Common questions include how to build a pie chart with CSS conic-gradient and how to make a colour-wheel background with a conic gradient.
How it works
The CSS Images Module Level 4 defines conic-gradient([from <angle>] [at <position>], <stop list>). Colours are placed at angles around the centre point and the browser interpolates between them along the rotation. A 0deg stop sits at the top (12 o'clock); positive angles rotate clockwise.
Hard stops — two consecutive stops at the same angle — produce sharp pie-slice edges. Combine a conic gradient with border-radius: 50% for a donut chart and mask: radial-gradient(closest-side, transparent 60%, black 0) for a hollow centre.
Examples
- A four-colour pinwheel →
background: conic-gradient(red, yellow, green, blue, red);. - A 30/70 pie chart →
conic-gradient(#3b82f6 0 30%, #e5e7eb 0 100%). - A 75% progress dial →
conic-gradient(#10b981 0 75%, #e5e7eb 0). - A starting angle for a rotated wheel →
conic-gradient(from 90deg, red, yellow).
FAQ
Do I need a square element?
Yes for the gradient to look circular. On a rectangle, the conic still rotates, but the angular shape stretches with the box.
Can I animate the starting angle?
Not directly — conic-gradient is not animatable. Animate transform: rotate(...) on the element instead.
Why are my stops not where I expect?
Stops are measured from the start angle, not from the top of the box. Use from 0deg to anchor 0% to the 12 o'clock position.
Can I get a donut shape?
Yes — apply a radial-gradient mask or layer a smaller circle on top with the background colour. The mask approach avoids needing matching backgrounds.