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.