Create Pie Charts in CSS

Pie charts are circular charts divided into slices to illustrate numerical proportions. Each slice represents a part of a whole — commonly used to visualize data distribution (e.g., market share, budget percentage, survey results).

Start learning CSS

Even though CSS is not designed primarily for data visualization, you can create pie-chart-like shapes using just CSS — mainly by leveraging borders, clip-path, and conic-gradient.

What a Pie Chart Is

A pie chart:

• Represents 100% total divided into parts
• Each slice = percentage
• Circular shape split into visual sections
• Often labeled or colored for clarity

Example:

Creating Pie Charts in CSS

Method 1: Using conic-gradient() (Modern & Simple)

This is the easiest and most modern way to create a pie chart.

<div class="pie"></div>

<style>
.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #4caf50 0 40%,   /* 40% */
    #2196f3 40% 70%,/* next 30% */
    #ff9800 70% 90%,/* next 20% */
    #f44336 90% 100% /* last 10% */
  );
}
</style>

✔️ Best method
✔️ Pure CSS
✔️ Easy to adjust slices
❌ Not supported in very old browsers

Result:

Method 2: CSS clip-path

You can manually build slices and rotate them.

<div class="chart">
  <div class="slice slice1"></div>
  <div class="slice slice2"></div>
</div>

<style>
.chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.slice {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}
.slice1 {
  background: orange;
  transform: rotate(0deg);
}
.slice2 {
  background: blue;
  transform: rotate(120deg);
}
</style>

✔️ Works without gradients
❌ Hard to calculate angles manually

Result:

Method 3: Border Trick (Old School)

Uses thick borders to simulate pie slices. Rarely used now but good to know:

<div class="pie"></div>

<style>
.pie {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: #4caf50 #2196f3 transparent transparent;
  border-radius: 50%;
}
</style>

✔️ Legacy technique
❌ Limited slices
❌ Hard to customize

Result:

When to Use Which Method

Summary

About the Author

codeflare

Administrator

Latest tech news and coding tips.

Visit Website View All Posts

codeflare

Latest tech news and coding tips.