Designer
All toolsConic Gradient Generator
Build CSS conic gradients with angles and color stops.
Stops
0°
120°
240°
360°
Preview
CSS
background: conic-gradient(from 0deg at 50% 50%, #3b82f6 0deg, #a855f7 120deg, #f43f5e 240deg, #3b82f6 360deg);
Frequently asked questions
- What's a conic gradient?
- A conic gradient sweeps colors around a center point like a color wheel or pie chart, instead of along a line (linear) or out from a center (radial). It's perfect for pie charts, loading indicators, and color pickers without any JavaScript.
- Is conic-gradient widely supported?
- Yes, all modern browsers (Chrome 69+, Safari 12.1+, Firefox 83+) support it. Don't ship it as the only design for critical UI in legacy browsers, but it's safe for progressive enhancement.
- How do I make a pie chart with conic-gradient?
- List color stops with explicit percentages, like conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%). Wrap the element in border-radius: 50% to clip it into a circle.