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:
.png)
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:
.png)
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:
.png)
Share your thoughts in the comments
Please Login to comment...