DEV Community

loading...
Cover image for Uses of CSS conic gradients

Uses of CSS conic gradients

technikhil314
Eating. Playing drums. Making mistakes. Trying to give my experience. Failing to explain and making new mistakes. All while coding. All for learning
Updated on ・1 min read

With conic gradient landing up in firefox 83. It will now have good support. Removing dependancy on SVG for some simple usecases progress ring is one of them.

Here is how I have achieved it with conic gradient, custom css properties and eight lines of javascript.

Check it out here

What more can we achieve with conic gradients:

You can create pie charts like this

or some awesome checkerboard background patterns like this

or something like this

or some fancy borders like these

or a hue color wheel

References:

  1. There is nice article already by Jeremias Menichelli about creating progress rings using svg here
  2. Use of CSS custom properties inspired from this talk by Lea Verou

Discussion (0)