CSS Conical Gradients

07-08-2019

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

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.

Method of defining a conical or repeating conical color gradient as a CSS image.