Zero Signup ToolsFree browser tools

Generator Tools

CSS Pie Chart Generator

Build a pure CSS pie or donut chart from any list of segments. Live preview, ready-to-paste CSS and HTML, plus SVG fallback. No JavaScript, no signup.

Segments

Total: 100 | 5 of 12

  • 38%
  • 27%
  • 18%
  • 11%
  • 6%

Quick presets

Chart options

Chart style

Size

260px

The chart's width and height in pixels.

Start offset

0deg

Rotate the first segment around the wheel (0 starts at 12 o'clock).

Legend labels

CSS class name

Live preview

  • Direct38% (38)
  • Organic27% (27)
  • Social18% (18)
  • Referral11% (11)
  • Email6% (6)

CSS

Drop into a stylesheet. Includes the chart class and the legend layout.

.pie-chart {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: conic-gradient(#3b82f6 0%, #3b82f6 38%, #22c55e 38%, #22c55e 65%, #f59e0b 65%, #f59e0b 83%, #ef4444 83%, #ef4444 94%, #a855f7 94%, #a855f7 100%);
}
.pie-chart-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.pie-chart-legend-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 0.6rem;
}
.pie-chart-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.pie-chart-legend-value {
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: 0.7;
}

HTML

Paste alongside the CSS. The chart uses role=img and the legend is a semantic list.

<div class="pie-chart" role="img" aria-label="Direct: 38%, Organic: 27%, Social: 18%, Referral: 11%, Email: 6%"></div>
<ul class="pie-chart-legend" aria-label="Chart legend">
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#3b82f6" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Direct</span>
    <span class="pie-chart-legend-value">38% (38)</span>
  </li>
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#22c55e" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Organic</span>
    <span class="pie-chart-legend-value">27% (27)</span>
  </li>
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#f59e0b" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Social</span>
    <span class="pie-chart-legend-value">18% (18)</span>
  </li>
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#ef4444" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Referral</span>
    <span class="pie-chart-legend-value">11% (11)</span>
  </li>
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#a855f7" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Email</span>
    <span class="pie-chart-legend-value">6% (6)</span>
  </li>
</ul>

Full embed

A single block with style and markup, ready to paste into CodePen, an MDX doc, or an email template.

<style>
.pie-chart {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: conic-gradient(#3b82f6 0%, #3b82f6 38%, #22c55e 38%, #22c55e 65%, #f59e0b 65%, #f59e0b 83%, #ef4444 83%, #ef4444 94%, #a855f7 94%, #a855f7 100%);
}
.pie-chart-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.pie-chart-legend-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 0.6rem;
}
.pie-chart-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.pie-chart-legend-value {
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: 0.7;
}
</style>
<div class="pie-chart" role="img" aria-label="Direct: 38%, Organic: 27%, Social: 18%, Referral: 11%, Email: 6%"></div>
<ul class="pie-chart-legend" aria-label="Chart legend">
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#3b82f6" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Direct</span>
    <span class="pie-chart-legend-value">38% (38)</span>
  </li>
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#22c55e" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Organic</span>
    <span class="pie-chart-legend-value">27% (27)</span>
  </li>
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#f59e0b" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Social</span>
    <span class="pie-chart-legend-value">18% (18)</span>
  </li>
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#ef4444" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Referral</span>
    <span class="pie-chart-legend-value">11% (11)</span>
  </li>
  <li class="pie-chart-legend-item">
    <span class="pie-chart-legend-swatch" style="background:#a855f7" aria-hidden="true"></span>
    <span class="pie-chart-legend-label">Email</span>
    <span class="pie-chart-legend-value">6% (6)</span>
  </li>
</ul>

SVG fallback

For email clients and older browsers that do not support conic-gradient.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="260" height="260" role="img" aria-label="Pie chart">
  <path d="M 50 50 L 50.000 0.000 A 50 50 0 0 1 84.227 86.448 Z" fill="#3b82f6"></path>
  <path d="M 50 50 L 84.227 86.448 A 50 50 0 0 1 9.549 79.389 Z" fill="#22c55e"></path>
  <path d="M 50 50 L 9.549 79.389 A 50 50 0 0 1 6.185 25.912 Z" fill="#f59e0b"></path>
  <path d="M 50 50 L 6.185 25.912 A 50 50 0 0 1 31.594 3.511 Z" fill="#ef4444"></path>
  <path d="M 50 50 L 31.594 3.511 A 50 50 0 0 1 50.000 0.000 Z" fill="#a855f7"></path>
</svg>

Segment math

Percentages are computed from each value divided by the total of all segments, and the conic-gradient places hard color stops at the cumulative percentage at the start and end of each segment.

LabelValuePercentStartEnd
Direct3838%0.0deg136.8deg
Organic2727%136.8deg234.0deg
Social1818%234.0deg298.8deg
Referral1111%298.8deg338.4deg
Email66%338.4deg360.0deg

How to use

  1. Edit the segment list: type a label, set a numeric value, and pick a color for each row. Use Add segment, Remove, and the Up and Down buttons to shape the data.
  2. Switch between Pie and Donut. For the donut variant, drag the Donut hole slider to set the inner radius and pick a hole color that matches the surface behind the chart.
  3. Use Start offset to rotate the first segment around the wheel, and Size to set the chart's width and height in pixels.
  4. Pick a Legend labels mode (percent plus value, percent only, value only, or hidden) and toggle Include legend off if you only need the chart markup.
  5. Click Copy on CSS, HTML, or Full embed to grab the snippet you need, or use SVG fallback for email clients and older browsers that do not support conic-gradient.

About this tool

CSS Pie Chart Generator turns any list of named segments with numeric values into a pure CSS pie or donut chart powered by a single conic-gradient, with no JavaScript animation loop, no SVG path math, and no charting library. Add between 2 and 12 segments, give each one a label, a value, and a color from a native color picker or any hex code, and the tool computes percentages from the row values, places hard color stops at the cumulative percentage at the start and end of each segment, and emits a conic-gradient that renders a crisp wedged circle. A donut mode stacks a radial-gradient hole on top of the conic gradient inside the same background shorthand, so the rendered ring is still one element with no nested DOM nodes; a slider controls the inner radius from 0 to 90 percent and a separate color picker sets the hole color so it matches the surface the chart sits on. A rotation slider lets you pick the start angle so a specific segment lands at 12 o'clock or any other position. The live preview always renders the exact CSS the tool will copy, on a Dark, Light, or Checker background, alongside a real legend that respects the label-mode toggle (percent plus value, percent only, value only, or hidden). Output includes a copy-ready CSS block with the chart class (and the legend layout when the legend is on), a matching accessible HTML snippet with role=img and an aria-label that lists every segment and percentage, a single Full embed block with style and markup ready to paste into CodePen, an MDX doc, or an email template, and an SVG fallback for older browsers and email clients that do not support conic-gradient. Six presets cover the cases people actually search for: traffic sources, browser share, monthly expenses, RGB equal thirds, a rainbow seven-slice wheel, and a yes-vs-no binary split. A segment-math table shows the value, percent, start angle, and end angle for every segment so you can verify the result against a hand calculation. Everything runs in your browser; the segment labels, raw values, and colors you experiment with here are never uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
Generator

CSS Gradient Generator

Linear, radial, and conic gradients with multi-stop editor and live preview.

Open tool

Generator

CSS Clip Path Generator

Drag polygon points to build CSS clip-path shapes with a live preview.

Open tool

Generator

CSS Loading Spinner Generator

Eight pure-CSS loader styles with size, color, speed, and stroke controls.

Open tool

Generator

Color Palette Generator

Build complementary, analogous, triadic, and monochromatic color schemes from any HEX.

Open tool

Calculator

Ratio Calculator

Simplify, solve, scale, and list equivalent ratios in one tool.

Open tool

All toolsGenerator Tools