In this article, we will dive into the conic-gradient() function in CSS. We will explore what it is, its syntax, and how to use it.
conic-gradient() creates an image consisting of a gradient with color transitions rotated around a center point. To create the gradient, you have to provide at least two colors.
Syntax:
background-image: conic-gradient(from angle at position, color degree, color degree, .....);By default, the angle is 0deg, and the position is at the center. The degree values are optional. If they are not specified, the colors will be spread equally around the center.
Here is an example:
HTML:
<body>
<div></div>
</body>CSS:
div {
width: 100px;
height: 100px;
background-image: conic-gradient(red, deeppink, yellow);
}
angle:
- Its default value is 0deg. 0deg corresponds to 12:00 PM.
- It defines the gradient rotation in the clockwise direction.
- Accepted units are deg for degrees, grad for gradients, rad for radians, and turn for turns.
Note: 360 degrees = 400 gradians = 2Π radians = 1 turn
position:
- Its default value is center.
- Its values are similar to the 2-value background-position property.
- You can set the position anywhere within, or even outside, the image.
Let’s rotate the entire gradient by 90 degrees in the clockwise direction.
background-image: conic-gradient(from 90deg, red, deeppink, yellow);
Let’s move the position to the left.
background-image: conic-gradient(from 90deg at left, red, deeppink, yellow);
Let’s move the position to the top left corner.
background-image: conic-gradient(from 90deg at 0 0, red, deeppink, yellow);
If you don’t like the smooth transitions, set two or more color stops at the same location (degree). The transition will become a hard line between the first and last colors declared at that location.
background-image: conic-gradient(red 0deg, red 90deg, deeppink 90deg, deeppink 180deg, yellow 180deg, yellow 270deg, orange 270deg, orange 360deg);
We can also convert it into a pie chart by setting the border-radius to 50%.
border-radius: 50%;
background-image: conic-gradient(red 0deg, red 90deg, deeppink 90deg, deeppink 180deg, yellow 180deg, yellow 270deg, orange 270deg, orange 360deg);
Let’s set the degree for each color.
background-image: conic-gradient(red 45deg, blue 180deg, yellow 270deg);
We can also provide multiple color stops.
background-image: conic-gradient( red 10deg, orange 10deg 30deg, deeppink 30deg 45deg, yellow 45deg 110deg, violet 110deg 200deg, purple 200deg 290deg, magenta 290deg);
In the above output, we did not specify the first color stop for the red and the last color stop for the magenta. They are equal to 0deg and 360deg respectively.
Here are the color ranges:
red starts at 0deg and ends at 10deg
orange starts at 10deg and ends at 30deg
deeppink starts at 30deg and ends at 45deg
yellow starts at 45deg and ends at 110deg
violet starts at 100deg and ends at 200deg
purple starts at 200deg and ends at 290deg
magenta starts at 290deg and ends at 360deg
repeating-conic-gradient():
It repeats the conic gradient. For example, look at the following gradient.
border-radius: 50%;
background-image: conic-gradient(yellow 0deg 10deg, deeppink 10deg 30deg);
We can repeat it using the repeating-conic-gradient function.
border-radius: 50%;
background-image: repeating-conic-gradient(yellow 0deg 10deg, deeppink 10deg 30deg);
Note:
- conic-gradient() function returns an object that belongs to image data type. For this reason, you have to use the function with the background-image property.
- Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition.
If you have understood the function, take a look at the this CSS progress bar made with conic-gradient() function.
