Most web developers will have already come across
radial-gradient. They make the creation of gradients in CSS super easy, where previously pre-generated images would have been necessary. Recently, a new type of gradient,
conic-gradient, has been defined in the CSS image spec. This allows for the use of gradients which are drawn around in a circle.
The name, conic gradient, comes from the fact that when contrasting colours are used within this kind of gradient, it generates a cone-like (i.e. conic) effect. They are sometimes also called angle gradients.
Conic gradients are currently only supported in Chrome, but work is in progress to support them in Firefox. Luckily, there is a very good conic-gradient polyfill available, which simply requires adding the JS files into your page, and then writing your CSS as if it was supported. This post uses that polyfill to display the examples in unsupported browsers.
Basic conic gradients
If you have used other types of gradients before, then the format will be quite familiar. The simplest format involves a start and end colour.
background: conic-gradient(white, black);
As you can see, the gradient stops quite suddenly once it gets back around to the start. To avoid this, you can put the starting colour again as the last colour, which results in a much smoother gradient. It also strongly shows the cone effect which gives this gradient its name.
background: conic-gradient(white, black, white);
It is quite obvious where the gradient starts and ends due to the white line at the top. It is possible to offset this start point using the
from keyword. The offset is specified in degrees, denoted by
deg. Let’s move the start of the gradient a bit to the left. Remember that there are 360 degrees in a circle. The 0 degree point is at the top centre. Moving the start backwards by 45 degrees will result in one-eighth of a full rotation.
background: conic-gradient(from -45deg, white, black, white);
Advanced conic gradients
There is a lot more to conic gradients than the simple examples above.
One common example of using conic gradients is a colour wheel. It is a good example as it is simple to write, but the result appears quite complex. You can add as many colour steps as you want to a gradient, and they will be automatically spaced at equal intervals.
background: conic-gradient(yellow, lime, blue, violet, red);
Despite the gradient name, it is possible to set up a conic gradient to have immediate colour stops, rather than smooth gradients. Up until now, we have only listed colours in our gradient, separated by commas. However, there are actually two other parameters you can add to each colour. These are the stop and start points of the colour. They can be specified either in
%. Let’s take a look at a pie chart and then have a deeper look at how it works.
background: conic-gradient(#444 0 25%, gold 0 70%, #0af 0 100%);
Our first colour is
#444 0 25%. This starts the gradient at
0 (the same as
0%), and draws the colour
#444 for 25% of the circle (the same as
Next, we have
70%. When the start point of a colour is less than where the previous point ended, the gradient will instead start from the previous colour’s end point. So, in this case, the browser will interpret this second colour as
70%. It’s also important to note that the
70% here means 70% from the start of the circle, not from the start of this colour. So, our gold colour will take up 45% of the circle, not 70%.
Finally, we finish our circle with
#0af, going all the way to 100%. The
100% is not actually necessary, as the browser can figure out that since this is the last colour, it must go to the end. But, it is more readable this way.
deg can be used, there are many different ways to write the same gradient. All of the gradients below will generate the same pie chart as above.
background: conic-gradient(#444 0 90deg, gold 0 252deg, #0af 0 360deg); background: conic-gradient(#444 0 25%, gold 25% 70%, #0af 70% 100%); background: conic-gradient(#444 0 25%, gold 0 70%, #0af 0);
Conic gradients do not have to start at the centre of their container. Just like
radial-gradient, they support the
at property to specify where the centre of the gradient should be. You must specify the x and y co-ordinates in percentages. Currently, the polyfill does not support
at, so if your browser does not natively support conic gradients yet, this example will not look correct.
background: conic-gradient(at 50% 25%, yellow, lime, blue, violet, red, yellow);
Be aware that if you are also using the
from property, you must not add a comma between it and
background: conic-gradient(from 90deg at 50% 25%, yellow, lime, blue, violet, red, yellow);
The spec also adds
repeating-conic-gradient, which is basically a convenience to avoid having to write the same thing over and over again.
background: repeating-conic-gradient(from -5deg, gold 0 10deg, red 0 30deg);
There is much more that can be done with
conic-gradient. I encourage you to take a look at my conic-gradient Codepen example, and play around with it to get a feel for what you can do with it.