Most web developers will have already come across linear-gradient and 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.
Browser Support
Conic gradients are currently supported in Chrome and Safari by default. Firefox has support for them, but it must be enabled by use of a feature flag (layout.css.conic-gradient.enabled). 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.
Colour Wheel
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);Pie charts
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 deg, or %. 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 0deg or 0%), and draws the colour #444 for 25% of the circle (the same as 90deg).
Next, we have gold from 0 to 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 gold from 25% to 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.
Since either % or 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);Offsets using at
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 at.
background: conic-gradient(from 90deg at 50% 25%, yellow, lime, blue, violet, red, yellow);
Repeating gradients
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);Demo
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.