Swati Lathia

Learning ways

CSS

Cascading Style Sheet

How to make a perfect Pie chart using CSS Gradients

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

Pie Chart using Conic Gradient





Scroll to top