CSS Gradient Generator

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

background: conic-gradient(direction-position, color-stop1, color-stop2, ...);

Example

background: conic-gradient(#7A7FBA, #11C37C);

More examples

background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

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

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.