CSS Conic Gradients
Last Updated :
24 Aug, 2023
CSS Conic Gradients is an inbuilt CSS function that is used to create a gradient with a color transition rotated at a center not radiated from the center.
The conic gradient angle starts from 0 degrees – 360 degrees. Conic Gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the data type, which is a special kind of image.
Syntax:
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
By default, the Conic Gradient angle is 0deg and the position is center.
Example 1: In this example, we will see the use of a conic gradient.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Conic Gradient
</ title >
< style >
.box {
height: 200px;
width: 200px;
border-radius: 50%;
background-image:
conic-gradient(red, yellow, green);
}
</ style >
</ head >
< body >
< div class = "box" ></ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will use a gradient at 45 degrees.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Conic Gradient</ title >
< style >
.box {
height: 200px;
width: 200px;
background-image:
conic-gradient(from 40deg, #84c73d, #bdd85b);
}
</ style >
</ head >
< body >
< div class = "box" ></ div >
</ body >
</ html >
|
Output:
Example 3: In this example, we will use repeat the conic gradient by using the repeat-conic-gradient() built-in function.
HTML
<!DOCTYPE html>
< html >
< head >
< title >conic gradient</ title >
< style >
.box {
height: 200px;
width: 200px;
border-radius: 50%;
background-image:
repeating-conic-gradient(rgb(123, 255, 0) 10%,
rgb(14, 194, 164) 20%);
}
</ style >
</ head >
< body >
< div class = "box" ></ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...