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

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


Example

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


Result



Browser compatibility

IE Edge Firefox Chrome Safari Opera iOS Safari Opera
Mini
Android
Browser
Chrome
Android
x 79+ 83+ 69+ 12.1+ 64+ 12.2+ x 98+ 64+


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.


CSS Gradients Generator

You can easily generate your own gradients with the online css gradient generator.