Conic gradient generator
Colors sweep around a center point. Use it for color wheels, pie charts and sheen effects, then copy the CSS.
conic gradient
Click the bar to add a stop
3 stops · eased
Code
background-image: conic-gradient(from 160deg at 50% 50%, #2a2f6b 0%, #30316c 6.5%, #40376e 13%, #583f71 19.5%, #754675 26%, #924d77 32.5%, #ab5279 39%, #bc547a 45.5%, #c2557a 52%, #c4597a 58%, #ca6379 64%, #d37378 70%, #dd8575 76%, #e79671 82%, #efa56c 88%, #f5af68 94%, #f7b267 100%);
Easing is applied by baking 8 stops per segment, so this snippet needs no modern colour support at all.
Shape
Start angle160°
Center50% 50%
Selected stop
1 of 3
Position0%
Opacity100%
Blending
Interpolation
Easing
Easing is why a fade to transparent stops looking like it ends early. Extra stops are computed along the curve.
Smoothness8 per segment
Grainoff
A little noise breaks up the banding a wide gradient shows on an 8-bit display.
Perceptually even. The best default for two colors far apart.
Presets
Questions
- What is a conic gradient used for?
- Color wheels, pie and donut charts, loading spinners and sweeping light effects on cards and buttons.
- How do I make hard edges, like a pie chart?
- Place two stops at the same position. The color changes instantly there instead of blending.
Next steps
The tools that usually come after this one.
Pairs with
The catalog behind this tool: real, published entries with verified pricing and licensing, not a list of affiliate links.