There’s a small line in the changelog that is is big news for CSS:
We’ve added support for CSS Conic Gradients (bug 1632351) and (bug 1175958).
🎉🎉🎉
Conic gradients are circular, just like their radial counterpart, but place color stops around the circle instead of from the center of the circle.
Adding more color stops gives it a “cone-like” appearance that’s fitting of the name:
Prior to Firefox 83, cross-browser support for conic gradients meant using a polyfill, like this one from Lea Verou. But browser support is much nicer with Firefox in the mix.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 69 | 83 | No | 79 | 12.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 122 | 123 | 122 | 12.2-12.5 |
And wouldn’t you know it! We just so happen to have a brand-spankin’ new CSS Gradients guide that not only covers conic gradients, but linear, radial, and repeating gradients as well, including explanations, examples and, of course, plenty of CSS tricks sprinkled in along the way.
One of those tricks? Using hard color stops to create a pie chart.
