conic-gradient Archives

A conic (conical) gradient is similar to a radial-gradient. The difference between them is that in the case of radial gradient the color stops
are defined by a length, and in the case of a conic gradient, the color stops are defined with an angle.

Example:

<!doctype html>
<html>
<head>
<style>
.radial-gradient {
  position: relative;
  background-image: radial-gradient(red, green, blue);
  width:200px;
  height: 200px;
  border-radius:50%;
  margin-right:30px;
}

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

</style>
</head>
<body>
    <div class="radial-gradient"></div>
    <div class="conic-gradient"></div>
</body>
</html>

Output:

More examples:

Pie Chart:

<!doctype html>
<html>
<head>
<style>
.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient(
     #1a535c 40deg, #ff6b6b 40deg 160deg, #4ecdc4 160deg);
  margin-right: 20px;
}

.pie-chart-border {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient( 
     #1a535c 1deg 60deg, #ff6b6b 60deg 120deg, #4ecdc4 120deg 220deg, #ffe66d 220deg);
  margin-right: 20px;
}

.pie-chart-border:before {
  content:"";
  position: absolute;
  background-color: #fff;
  width:150px;
  height:150px;
  border-radius:50%;
  top:25px;
  left:25px;
}

.pie-chart-four-colors {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient(#4ecdc4 25%, #1a535c 0 50%, #ffe66d 0 75%, #ff6b6b 0);
}

</style>
</head>
<body>
  <div class="pie-chart"></div>
  <div class="pie-chart-border"></div>
  <div class="pie-chart-four-colors"></div>
</body>
</html>

Checkerboard:

<!doctype html>
<html>
<head>
<style>
.checkerboard {
  position: relative;
  border:7px solid #000;
  width:200px;
  height:200px;
  background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 43%/45px 50px;
}
</style>
</head>
<body>
  <div class="checkerboard"></div>
</body>
</html>

Output:

Starburst:

<!doctype html>
<html>
<head>
<style>
.starburst {
  position: absolute;
  width:200px;
  height: 200px;
  background: repeating-conic-gradient(#ffdd00 0 18deg, #ffc300 0 36deg);
}
</style>
</head>
<body>
  <div class="starburst"></div>
</body>
</html>

Output:

Umbrella:

<!doctype html>
<html>
<head>
<style>
.umbrella {
  position: relative;
  width:200px;
  height:200px;
  border-radius:50%;
  background-image:
 conic-gradient(
      #ffe0e9 0deg 20deg, #ffc2d4 20deg 40deg, #ff9ebb 40deg 60deg, #ff7aa2 60deg 80deg, #e05780 80deg 100deg, #b9375e 100deg 120deg, #8a2846 120deg 140deg, #602437 140deg 160deg, #522e38 160deg 180deg, #ffe0e9 180deg 200deg, #ffc2d4 200deg 220deg, #ff9ebb 220deg 240deg, #ff7aa2 240deg 260deg, #e05780 260deg 280deg, #b9375e 280deg 300deg, #8a2846 300deg 320deg, #602437 320deg 340deg, #522e38 340deg 360deg);    
    }     
}
</style>
</head>
<body>
  <div class="umbrella"></div>
</body>
</html>

Output:

Enjoy coding!