How to Use Conic Gradients in CSS
This article describes conic gradients, Conic gradient is third type of CSS gradients with the use of conic-gradient() function we can make our UI more elegant.
Conic Gradient is the third type of CSS gradient, we already have Linear Gradient and radial gradient. Now we will use conic gradients to make our web UI more classy,
conic-gradient() is the in-built function in CSS to use conic gradients, just like linear-gradient() & radial-gradient().
Below the examples that illustrate the conic-gradient() function in CSS:
conic gradient with No Angle
This is a basic example of conic gradient with no angle or with no any position.
Syntax:
Background image: conic-gradient(color degree, color degree, ...)Result
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="grad1 conic-grad-1"></div>
</body>
</html>CSS
body {
margin: auto;
color: white;
}
.grad1{
margin: 20px auto;
padding: 25px;
max-width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
.conic-grad-1{
background-image: conic-gradient( cyan, magenta, yellow);
}Conic gradient with Angle
In this example you’ll find an angle assigned of 60 deg with the use of from keyword.
Result
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="grad1 conic-grad-2"></div>
</body>
</html>CSS
body {
margin: auto;
color: white;
}
.grad1{
margin: 20px auto;
padding: 25px;
max-width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
.conic-grad-2{
background-image: conic-gradient(from 60deg, cyan, magenta, yellow);
}Conic Gradient with Position
In this example, we will use from and at keyword with conic-gradient() function.
Syntax:
Background image: conic-gradient(from deg at percentage, color, color, ...)Result
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="grad1 conic-grad-3"></div>
</body>
</html>CSS
body {
margin: auto;
color: white;
}
.grad1{
margin: 20px auto;
padding: 25px;
max-width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
.conic-grad-3{
background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
}Smooth conic gradient
This is a multiple color smooth conic gradient. We will not get any angle here as because we are using multiple i.e., more that three colors without any angle or any position.So, it just creates multiple color gradient as below shown image.
Result
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="grad1 conic-grad-4"></div>
</body>
</html>CSS
body {
margin: auto;
color: white;
}
.grad1{
margin: 20px auto;
padding: 25px;
max-width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
.conic-grad-4{
background-image: conic-gradient( cyan, magenta, yellow, cyan);
}Conic Gradient Pie Chart
Simple pie chart with conic-gradient() function. Below code will create simple pie chart with conic-gradient() function.
background-image: conic-gradient(
magenta 0deg, magenta 90deg,
cyan 90deg, cyan 180deg,
yellow 180deg, yellow 270deg,
green 270deg, green 360deg);Here We have used 360 deg circle logic.
Result
HTML
<!DOCTYPE html>
<html lang="en"><head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="temp.css">
</head><body>
<div class="grad1 conic-grad-pie"></div></body>
</html>
CSS
body {
margin: auto;
color: white;
}.grad1{
margin: 20px auto;
padding: 25px;
max-width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}.conic-grad-pie{
background-image: conic-gradient( magenta 0deg, magenta 90deg,
cyan 90deg, cyan 180deg,
yellow 180deg, yellow 270deg,
green 270deg, green 360deg);
}
Conic Gradient repeat
Just like other gradients like linear and radial we may create repeat gradient with conic-gradient() function. In another word we have displayed rays going outside with repeating-conic-gradient() function.
Syntax:
Background image: repeating-conic-gradient( color deg, color deg, ...)Result
HTML
<!DOCTYPE html>
<html lang="en"><head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="temp.css">
</head><body>
<div class="grad1 conic-grad-repeat"></div></body>
</html>
CSS
body {
margin: auto;
color: white;
}.grad1{
margin: 20px auto;
padding: 25px;
max-width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}.conic-grad-repeat{
background: repeating-conic-gradient(magenta 10%, yellow 20%);
}
Conic Gradient Checks
Another Example, We can have more fun with this gradient i.e we can create checks as well
Result
HTML
<!DOCTYPE html>
<html lang="en"><head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="temp.css">
</head><body>
<div class="grad1 conic-grad-checks"></div></body>
</html>
CSS
body {
margin: auto;
color: white;
}.grad1{
margin: 20px auto;
padding: 25px;
max-width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}.conic-grad-checks{
background: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0);
background-size: 4em 4em;
}
We have seen multiple possible ways using conic-gradient() function. You may create more tha this with your own logic.
Happy Coding!
