Table of Contents
We can already do linear gradients and radial gradients with CSS quite easily, and now there's a 3rd type of gradient that will be defined in the spec. Conic gradients are similar to radial gradients, except that the color stops are on the outer edge of the circle that gets created.
For example, here's a radial gradient and a conic gradient that have the same color stops:
<div class="gradient-wrapper"><div class="gradient radial"></div><div class="gradient conic"></div></div>
.gradient {
width: 200px;
height: 200px;
border-radius: 50%;
}
.radial {
background: radial-gradient(#FAE042, #4AAE9B);
}
.conic {
background: conic-gradient(#FAE042, #4AAE9B);
}
And here's the markup:
<div class="gradient radial"></div>
<div class="gradient conic"></div>
More Examples / Syntax
Conic gradients can have multiple color stops:
<div class="gradient conic-2" style="width:200px"></div>
.conic {
background: conic-gradient(cyan, magenta, yellow, black);
}
—
Each color can specify it's stop position using units such as degrees, turns or percentages:
<div class="gradient-wrapper"><div class="gradient conic-3"></div><div class="gradient conic-3-2"></div></div>
.conic {
background: conic-gradient(red 180deg, #4AAE9B);
}
.conic-2 {
background: conic-gradient(red 180deg 90%, #4AAE9B);
}
Notice how a second position value for a color stop specifies the transition.
—
Hard stops
The color stops can jump to the next color immediately by eliminating the transition between two stops:
<div class="gradient conic-4" style="width:200px"></div>
.conic-4 {
background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0);
}
from and at Keywords
You can specify the starting angle using the <^>from<^> keyword:
<div class="gradient conic-5" style="width:200px"></div>
.conic {
background: conic-gradient(from 45deg, cyan, magenta, yellow);
}
Furthermore, you can use the <^>at<^> keyword to specify the center of the transition:
.conic {
background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
}
[warning] Unfortunately I can't show an example of using <^>at<^> at this moment because at the time of this writing there's a bug in the polyfill that would make all the other examples crash when viewed in a browser that relies on the polyfill.
Smooth Transitions
For smooth transitions, have the last color stop be the same as the first one:
<div class="gradient conic-7" style="width:200px"></div>
.conic {
background: conic-gradient(cyan, magenta, yellow, cyan);
}
Repeating Conic Gradients
There's also a repeating-conic-gradient function that can be used to create some interesting patterns with conic gradients:
<div class="gradient conic-repeating" style="width:200px"></div>
.conic-repeating {
background: repeating-conic-gradient(red 10%, #4AAE9B 20%);
}
Polyfill
As of 2020, only 85% of devices worldwide support the conic-gradient property. Thankfully though, there's a polyfill by @LeaVerou that we can use to start using conic gradients now.
To use the polyfill simply add the scripts for Prefix-free and the conic gradient polyfill itself before the closing body tag in your pages:
<script src="/assets/polyfills/prefixfree.min.js"></script>
<script src="/assets/polyfills/conic-gradient.js"></script>
<style>
.gradient { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; } .radial { background: radial-gradient(#FAE042, #4AAE9B); } .conic { background: conic-gradient(#FAE042, #4AAE9B); } .conic-2 { background: conic-gradient(cyan, magenta, yellow, black); } .conic-3 { background: conic-gradient(red 180deg, #4AAE9B); } .conic-3-2 { background: conic-gradient(red 180deg 90%, #4AAE9B); } .conic-4 { background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0); } .conic-5 { background: conic-gradient(from 45deg, cyan, magenta, yellow); } .conic-6 { <p> } .conic-7 { background: conic-gradient(cyan, magenta, yellow, cyan); } .conic-repeating { background: repeating-conic-gradient(red 10%, #4AAE9B 20%); } .gradient-wrapper { display: grid; grid-template-columns: 1fr 1fr; } @media screen and (max-width: 40em) { .gradient-wrapper { grid-template-columns: 1fr; } } </style>
