CSS Conical Gradients
A conic gradient is very similar to a radial gradient. They are both circular in nature, and both use the center as source point. The color of a radial gradient spreads from the center out towards the edge, where as the color of a conic gradient spreads around the circle
Conic Gradient
Radial Gradient
Using Conical Gradients
Just like radial gradients, conical gradients are very easy to use:
.conic-gradient {
background: conic-gradient(#fff, #000);
}
Example
See the Pen CSS Conical Gradients by Tristan White (@triss90) on CodePen.
Browser Support
As of the writing of this article, conic gradients are only supported by Safari and Chrome.