Conic gradients are just plain awesome! You can use them to recreate the Mac rolling beachball loading cursor by just using CSS. But the fun doesn't stop there, you can easily make pie charts, checkered patterns and more only by using the
First let's take a look at a little demo. We have created a demo with the checkered and a little suburst effect behind the emoji only by using the conic gradient.
How does this work?
Like radial gradients, conic gradients change their color on a circular/oval shape. Where radial gradients change color along their radius, conical gradients change their color along their perimeter. See the diagrams below to see the difference.
We kind of lied when we said this was CSS-only. Conic gradients are not yet supported by any browser. A first draft for the conic gradients spec was written back in 2011 by Lea Verou, and she has been advocating the conical gradient ever since. Currently she is the editor for the spec. She also wrote a polyfill to make it possible to use conic gradients today. And that's what we use here.
Conic gradients work in Chrome (but still behind the "Experimental Web Platform Features" flag) and are in development in Webkit right now. Implementation for other browser will hopfully follow soon, since web developers have been vocal about wanting the feature implemented for a while now.
Do you think we should get conic gradients today rather than in 2026? Than speak up and get in touch with the different browser vendors and let them know!
Browser support looks bleak right now, but will hopefully improve soon.
- Chrome Behind flag
- Chrome for Android Behind flag
- Webkit In development
Read and learn more about this feature:
Demo source code
Do you want to see what makes these demo possible? Check out the source file: