Home > Designing, Others > Firefox 83

Firefox 83

November 18th, 2020 Leave a comment Go to comments

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.

CodePen Embed Fallback

Adding more color stops gives it a “cone-like” appearance that’s fitting of the name:

CodePen Embed Fallback

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.


Chrome Firefox IE Edge Safari
69 83 No 79 12.1

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
86 No 81 12.2-12.4

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.

CodePen Embed Fallback

Direct Link to ArticlePermalink

The post Firefox 83 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.