CSS Conic gradients are a new type of gradient introduced in the CSS Images and Replaced Content specification which is currently in a working draft state. Conic gradients are similar to radial gradients which gradually change color from a central location. However, Conic gradients change color around a central location.

Note: At the time of posting, there is little current browser support for conic gradients (Can I Use browser support). Chrome 69 supports conic gradients and webkit is currently developing it.

Official conic gradient syntax looks like this. Below, you’ll have a chance to play with conic gradients interactively.

conic-gradient() = conic-gradient(
  [ from <angle> ]? [ at <position> ]?,
  <angular-color-stop-list>
)

Playground

This first simple syntax just uses two colors. Each color is spaced out evenly.

Conic Gradient

.gradient { background: conic-gradient(#98D279, #79A5D2); }

Or you could just add as many colors as you want. Adding multiple comma separated colors spaces the colors out evenly.

Conic Gradient

.gradient { background: conic-gradient(#98D279, #79A5D2); }

Color Stops

Color stops can be specified to determine where colors start or end. A percent value represents the color stops position from the start (0%) of the gradient to the end (100%).

Conic Gradient

.gradient { background: conic-gradient(#98D279 33%, #79A5D2 66%); }

Color stops can be specified with normal angle types like deg and turn as well.

Conic Gradient

.gradient { background: conic-gradient(#98D279 33deg, #79A5D2 1turn); }

Starting Angle

You can specify the starting conic gradient angle by adding a from 45deg or a from 68turn at the start of the CSS value. The widget below describes it better.

Conic Gradient

.gradient { background: conic-gradient(from 0deg, #98D279, #79A5D2); }

Gradient Location

The gradient starting position can be specified by adding a position like at 40% 60% at the start of the CSS value. at 40% 60% means start the conic gradient 40% from the left and 60% from the top. The widget below describes it better.

Conic Gradient

.gradient { background: conic-gradient(at 50% 50%, #98D279, #79A5D2); }

Starting Position & Angle

The starting position and starting angle can be specified by stating an angle and starting position. A good example is:from 25deg at 40% 60% which translates to at 40% from the left and 60% from the top, create a conic gradient at 25deg.

Conic Gradient

.gradient { background: conic-gradient(from 0deg at 50% 50%, #98D279, #79A5D2); }

Repeating Conic Gradients

repeating-conic-gradient() allows you to define repeating conic gradients. These gradients accept the same values as conic-gradient() does. Here is a basic widget for playing with just 2 colors.

Conic Gradient

.gradient { background: repeating-conic-gradient(#D27B79, #798CD2 5deg); }

Here is another example with the gradients starting location and starting angle.

Conic Gradient

.gradient { background: repeating-conic-gradient(from 0deg at 0% 0%, #D27B79, #798CD2 20deg); }

Background Size

.gradient { background-size: 100px 100px; }

If this was interesting for you, check out my complete playground on CSS gradients https://css-playground.com/view/45/css-gradient-playground.

HTML
CSS
Output