How to make a perfect Pie chart using CSS Gradients

By swatilatPosted on February 16, 2022Posted in CSS, CSS TutorialTagged css3 gradient property, how to make pie chart in css, pie chartsNo Comments

You just need to provide border-radius 50% to remove a corner of a given area/square/rectangle. If you want to start your color at a specified angle, then you must provide the color name with starting angle & the same color name with the ending angle. Ending angle of last color need not to be provided. It automatically ends & fills the color.

<html>
<head>
<style>
#d1{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(Pink,pink ,purple,purple,green,green,blue);
  border-radius:50%;
}
#d2{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(Pink 0deg,pink 90deg,purple 90deg,purple 180deg,green 180deg,green 270deg,blue 270deg);
  border-radius:50%;
}
</style>
</head>
<body>
      <h1>Pie Chart using Conic Gradient</h1>
      <div id="d1"></div><br><br>
      <div id="d2"></div><br><br>
</body>
</html>

Look at the output of above code