About
Examples of CSS Conic gradients. Has browser limitations - not yet widely supported
Alternatives
Use the SVG pie chart if you need very wide support (although polyfills are available that dynamically generate PNG backgrounds).
Accessibility
2019-07-01: Like a background image gradient, no usable to show data by itself, so show as additional data (piechart and numerical output). If not decorative at all, don’t use this, and instead use a piechart with labels.
Requirements
Issues
Examples
0
1
2
3
4
5
0
1
2
3
4
5
0
1
2
3
4
5
0
1
2
3
4
5
0
1
2
3
4
5
0
1
2
3
4
5
<div class="c-conic-wrap">
<div class="c-conic c-conic--1" data-r="0">
<div class="c-conic_g">
<span class="c-conic_t">0</span>
</div>
</div>
<div class="c-conic c-conic--1" data-r="1">
<div class="c-conic_g">
<span class="c-conic_t">1</span>
</div>
</div>
<div class="c-conic c-conic--1" data-r="2">
<div class="c-conic_g">
<span class="c-conic_t">2</span>
</div>
</div>
<div class="c-conic c-conic--1" data-r="3">
<div class="c-conic_g">
<span class="c-conic_t">3</span>
</div>
</div>
<div class="c-conic c-conic--1" data-r="4">
<div class="c-conic_g">
<span class="c-conic_t">4</span>
</div>
</div>
<div class="c-conic c-conic--1" data-r="5">
<div class="c-conic_g">
<span class="c-conic_t">5</span>
</div>
</div>
</div>
<div class="c-conic-wrap">
<div class="c-conic c-conic--5" data-r="0">
<div class="c-conic_g">
<span class="c-conic_t">0</span>
</div>
</div>
<div class="c-conic c-conic--5" data-r="1">
<div class="c-conic_g">
<span class="c-conic_t">1</span>
</div>
</div>
<div class="c-conic c-conic--5" data-r="2">
<div class="c-conic_g">
<span class="c-conic_t">2</span>
</div>
</div>
<div class="c-conic c-conic--5" data-r="3">
<div class="c-conic_g">
<span class="c-conic_t">3</span>
</div>
</div>
<div class="c-conic c-conic--5" data-r="4">
<div class="c-conic_g">
<span class="c-conic_t">4</span>
</div>
</div>
<div class="c-conic c-conic--5" data-r="5">
<div class="c-conic_g">
<span class="c-conic_t">5</span>
</div>
</div>
</div>
<div class="c-conic-wrap">
<div class="c-conic c-conic--2" data-r="0">
<div class="c-conic_g">
<span class="c-conic_t">0</span>
</div>
</div>
<div class="c-conic c-conic--2" data-r="1">
<div class="c-conic_g">
<span class="c-conic_t">1</span>
</div>
</div>
<div class="c-conic c-conic--2" data-r="2">
<div class="c-conic_g">
<span class="c-conic_t">2</span>
</div>
</div>
<div class="c-conic c-conic--2" data-r="3">
<div class="c-conic_g">
<span class="c-conic_t">3</span>
</div>
</div>
<div class="c-conic c-conic--2" data-r="4">
<div class="c-conic_g">
<span class="c-conic_t">4</span>
</div>
</div>
<div class="c-conic c-conic--2" data-r="5">
<div class="c-conic_g">
<span class="c-conic_t">5</span>
</div>
</div>
</div>
<div class="c-conic-wrap">
<div class="c-conic c-conic--3" data-r="0">
<div class="c-conic_g">
<span class="c-conic_t">0</span>
</div>
</div>
<div class="c-conic c-conic--3" data-r="1">
<div class="c-conic_g">
<span class="c-conic_t">1</span>
</div>
</div>
<div class="c-conic c-conic--3" data-r="2">
<div class="c-conic_g">
<span class="c-conic_t">2</span>
</div>
</div>
<div class="c-conic c-conic--3" data-r="3">
<div class="c-conic_g">
<span class="c-conic_t">3</span>
</div>
</div>
<div class="c-conic c-conic--3" data-r="4">
<div class="c-conic_g">
<span class="c-conic_t">4</span>
</div>
</div>
<div class="c-conic c-conic--3" data-r="5">
<div class="c-conic_g">
<span class="c-conic_t">5</span>
</div>
</div>
</div>
<div class="c-conic-wrap">
<div class="c-conic c-conic--4" data-r="0">
<div class="c-conic_g">
<span class="c-conic_t">0</span>
</div>
</div>
<div class="c-conic c-conic--4" data-r="1">
<div class="c-conic_g">
<span class="c-conic_t">1</span>
</div>
</div>
<div class="c-conic c-conic--4" data-r="2">
<div class="c-conic_g">
<span class="c-conic_t">2</span>
</div>
</div>
<div class="c-conic c-conic--4" data-r="3">
<div class="c-conic_g">
<span class="c-conic_t">3</span>
</div>
</div>
<div class="c-conic c-conic--4" data-r="4">
<div class="c-conic_g">
<span class="c-conic_t">4</span>
</div>
</div>
<div class="c-conic c-conic--4" data-r="5">
<div class="c-conic_g">
<span class="c-conic_t">5</span>
</div>
</div>
</div>
<div class="c-conic-wrap">
<div class="c-conic c-conic--6" data-r="0">
<div class="c-conic_g">
<span class="c-conic_t">0</span>
</div>
</div>
<div class="c-conic c-conic--6" data-r="1">
<div class="c-conic_g">
<span class="c-conic_t">1</span>
</div>
</div>
<div class="c-conic c-conic--6" data-r="2">
<div class="c-conic_g">
<span class="c-conic_t">2</span>
</div>
</div>
<div class="c-conic c-conic--6" data-r="3">
<div class="c-conic_g">
<span class="c-conic_t">3</span>
</div>
</div>
<div class="c-conic c-conic--6" data-r="4">
<div class="c-conic_g">
<span class="c-conic_t">4</span>
</div>
</div>
<div class="c-conic c-conic--6" data-r="5">
<div class="c-conic_g">
<span class="c-conic_t">5</span>
</div>
</div>
</div>