Swati Lathia

Learning ways


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.

  height: 200px;
  width: 200px;
  background-image: conic-gradient(Pink,pink ,purple,purple,green,green,blue);
  height: 200px;
  width: 200px;
  background-image: conic-gradient(Pink 0deg,pink 90deg,purple 90deg,purple 180deg,green 180deg,green 270deg,blue 270deg);
      <h1>Pie Chart using Conic Gradient</h1>
      <div id="d1"></div><br><br>
      <div id="d2"></div><br><br>

Look at the output of above code

Pie Chart using Conic Gradient

Scroll to top