CSS Conic Gradients
What is a Conic Gradient?The conic-gradient() is a gradient where the color transition rotates around a center point.
To create a conic gradient you must define at least two colors.
Syntax
Syntax Copy
background: conic-gradient(direction-position, color-stop1, color-stop2, ...);
Example
Example Copy
background: conic-gradient(#7A7FBA, #11C37C);
Result
More examples
Example Copy
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
Example Copy
background: conic-gradient(#4CAF50 0% 30%, #FFC107 30% 60%, #F44336 60% 100%);
Common uses
- Color pickers and color wheels
- Pie/donut charts
- Loading spinners
- Angled badge or ribbon effects
Browser compatibility
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Chrome Android |
|---|---|---|---|---|---|---|---|---|---|
| x | 79+ | 83+ | 69+ | 12.1+ | 56+ | 12.2+ | x | 151+ | 151+ |
You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it's important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.
FAQ
Can I use a conic gradient for a pie chart?
Yes — give consecutive color stops the same start/end percentage (e.g.
#4CAF50 0% 30%, #FFC107 30% 60%) instead of letting them blend, and each becomes a solid "slice." Can I animate a conic gradient?
Not natively — gradients aren't animatable by default. You can fake rotation with a CSS
transform: rotate() on the element, or register the angle as a custom property with @property to animate the gradient itself in supporting browsers. Generate your own conic gradient →