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 Conic Gradients Generator
You can easily generate your own gradients with the online css gradient generator.