html

Conic Gradients in CSS

Cascading Style Sheets (CSS) allows you to add style to your web pages in numerous ways by providing a humongous range of properties and methods. Apart from these, CSS also provides gradients that allow the display of an even transition of various colors.

There are a total of three gradients specified in CSS which are, Linear gradient, Radial Gradient, and Conic Gradient. In this tutorial, we will discuss the conic gradients and learn how to use them.

What is a Conic Gradient in CSS

In CSS, a conic gradient is an in-built function that lets you add gradients as background images with color transitions around a midpoint.

Syntax

background-image: conic-gradient (color degree, color degree,...);

You must specify at least two colors to make the conic-gradient() work, moreover, if you do not specify the degree of the color then the colors will spread evenly around the midpoint.

Let’s explore some examples.

Example 1

The example below demonstrates the working of the conic-gradient() using three colors.

HTML

<div class="div"></div>

Here we are simply creating a div container to illustrate the working of conic gradients.

CSS

.div {
    height: 180px;
    width: 180px;
    background-image: conic-gradient(red, green, blue);
}

The height and width of the div is set to 180px and we are assigning three basic colors to the conic-gradient() function. Since no degree of the colors is specified, therefore, these colors will spread evenly across the midpoint of the div container.

Output

A conic gradient with three colors.

Example 2

The example below demonstrates the working of the conic-gradient() using four colors.

CSS

.div {
    height: 180px;
    width: 180px;
    background-image: conic-gradient(pink, purple, green, yellow);
}

Here we have assigned four colors to the conic-gradient() function.

Output

A conic gradient with four colors.

Now that we have a good understanding of the concept, let’s explore how to add degrees to the conic gradients in CSS with the help of some examples.

Example 3: How to add degrees to the conic gradient

The example below demonstrates the way you can specify the degrees along with the colors of the conic gradient.

CSS

.div {
    background-image: conic-gradient(pink 45deg, purple 90deg, yellow 230deg);
}

In the above code, we are specifying three colors along with the degree for each color.

Output

A conic gradient with specified color degrees.

Example 4: How to make pie charts using conic gradients

For the purpose of making a pie chart, first set the border radius of the div container to 50% along with some height and width.

CSS

.div {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    background-image: conic-gradient(red, green, blue);
}

The border-radius of the div element has been set to 50%.

Output

A rounded pie-chart like shape has been generated successfully.

Now you can create a pie-chart by specifying range of color degrees in the conic-gradient() function as shown in the CSS code snippet below:

CSS

.div {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    background-image: conic-gradient(red 0deg, red 90deg,
    green 90deg, green 180deg,
    blue 180deg, blue 270deg,
    yellow 270deg, yellow 360deg);
}

In the above code, we have specified four colors which are red, green, blue and yellow. Now for each color, a horizontal and a vertical degree has been specified thus covering the whole 360 degrees of a circle.

Output

A pie-chart with definite color degrees.

Example 5: How to add a conic gradient from a specific angle

For the purpose of adding conic gradients from a particular angle, you have to specify that angle in the conic-gradient() function. Here is how you do it.

CSS

.div {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    background-image: conic-gradient(from 270deg, red, green, blue);
}

Here we have specified that the colors red, green, and blue should be evenly spread from an angle of 270 degrees.

Output

A conic gradient pie-chart from a specified angle is added successfully.

Example 6: How to add a conic gradient from a specific position

Since we know that colors in a conic gradient spread evenly across a midpoint, therefore, by defining the position we are actually defining the midpoint of the conic gradient. Consider the example to learn how to do that.

CSS

.div {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    background-image: conic-gradient(at 30% 45%, red, green, blue);
}

In the above code we have defined the position of midpoint at 30% 45%.

Output

A conic gradient from a specified position is added.

Example 7: How to repeat a conic gradient

For the purpose of repeating a conic gradient, use the repeating-conic-gradient() function. Consider the example below.

CSS

.div {
height: 180px;
width: 180px;
border-radius: 50%;
background-image: repeating-conic-gradient(pink 10deg, pink 20deg, yellow 20deg, yellow 30deg);
}

Here we are using the repeating-conic-gradient() function and using two colors along with specifying their degrees.

Output

A repeated conic gradient was inserted

Conclusion

A conic gradient in CSS is an in-built function that lets you add gradients with color transitions around a midpoint. You have to specify at least two colors to make a conic gradient. There are many fun things that you can do to a conic gradient such as specify color degrees, angles, or a position. Besides, using the conic gradients you can also make pie-charts. In this write-up, we discussed conic gradients along with numerous examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.