Conic Gradient
Create a conic gradient that sweeps colors around a center.
Steps to make a conic gradient
- Drag the center handle, or use the rotate knob to set the from angle the sweep starts at.
- Add color stops in the order they should rotate clockwise from the top.
- For pie segments, give two adjacent stops the same angle to make a hard edge.
- Copy the CSS, or open a stop in the Color Picker to fine-tune it.
What is a conic gradient?
A conic gradient sweeps its colors around a center point like the hands of a clock, where a radial gradient instead radiates outward in rings. Color stops sit on the circle by angle, not along a line, so 0deg is the top and the colors rotate clockwise back to 360deg. That single difference is what makes it the natural pick for color wheels, pie-style charts, progress rings and angular shine.
Conic gradient angle and position values
Two settings steer the sweep: from sets the starting angle, and at sets the center, read like background-position. CSS angles here match transforms, so they may feel backwards if you expect math angles:
How to make a pie chart with a conic gradient
A pie wedge is just two color stops sharing an angle, so the color switches with no blend. Multiply each slice percentage by 3.6 to get its degrees, then add border-radius: 50% to round it off:
Why a conic gradient looks stripy or banded
Banding has two common causes worth knowing before you blame the browser. A small element scaled up with transform shows stepped bands, because the gradient is rasterised at the painted size, so render it at its final size or switch to an SVG conic for large shapes. The other case is intentional: two stops at the same angle create a hard line rather than a blend, which is exactly how the pie segments above work.
Where conic gradients get used
- Color wheels and hue pickers, blending in oklch for an even spread.
- Pie and donut chart backdrops for decorative dashboards.
- Progress rings and spinners, paired with a mask for the donut hole.
- Metallic, holographic and starburst button effects.
- Checkerboards and angular patterns with repeating-conic-gradient.
Conic vs radial and linear gradients
For a straight blend use the CSS Gradient builder; to spread softly from a point, the Radial Gradient tool fits better.
Conic gradient browser support
conic-gradient() now works across every current Chrome, Firefox, Safari and Edge with no prefix, so most projects need no fallback. Two old gotchas remain: Safari 12.1 to 16.1 ignores the in oklch hue clause and falls back to flat colors, which you can gate with @supports, and smoothly animating the from angle needs the property registered as an <angle> with @property. Remember conic-gradient is an image, so it will not work on background-color, only on background or background-image.
0deg points to the top and angles increase clockwise, matching CSS transforms rather than math angles. Add from 90deg to start the sweep from the right.
Give two adjacent color stops the same angle so the color changes with a hard edge, for example red 0 120deg, blue 120deg 360deg, then add border-radius: 50%.
Multiply the percentage by 3.6. So a 25% slice is 90deg and a 40% slice is 144deg.
Yes. Add at and a position, like conic-gradient(at 30% 70%, ...), the same as background-position. The center handle here writes it for you.
It is rasterised at the painted size, so scaling a small box up shows bands. Render it at the final size or use an SVG conic gradient for large shapes.
Only for decoration. A background image carries no semantic meaning for screen readers, so use SVG for charts that convey data.