← All elements
<div class="w"><div class="pie"></div><ul><li><i style="background:#6366f1"></i>Design 40%</li><li><i style="background:#ec4899"></i>Code 35%</li><li><i style="background:#14b8a6"></i>Test 25%</li></ul></div>About this layout
A pie chart drawn with a single conic-gradient and a legend, no SVG, canvas or script needed.
How it works
The pie is one element with a conic-gradient background. Each colour stop uses percentages, for example 0 to 40 percent, 40 to 75 percent and 75 to 100 percent, so the slices are drawn by the browser with no SVG or canvas. The legend next to it is plain HTML list items with coloured squares.
Ways to customise it
- Edit the percentages in the conic-gradient to change slice sizes.
- Add another colour stop and a legend item to add a slice.
- Add a mask or an inner circle to turn the pie into a donut.
Good to know
A chart drawn this way has no text for assistive technology, so keep the legend with the real numbers visible. Conic gradients are supported in all current browsers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.