Creating Pie Charts with CSS

Pie charts can be created using the CSS conic-gradient() function. This creates an image gradient which can then be placed as the background of the container.

CSS conic-gradient()

CSS conic-gradient() creates an image gradient with various color stops placed around the circumference of a circle.

/* red : 0 deg to 120 deg */
/* orange : 120 deg to 240 deg */
/* yellow : 240 deg to 360 deg */
div {
	background: conic-gradient(red 0deg 120deg, orange 120deg 240deg, yellow 240deg 360deg);
}

• There are 360 degrees in a circle.
• By default the starting point of the gradient is 12:00 PM north (0 degrees).
• Multiple color stops can be given. Each color stop can be given by the syntax color-code start-angle end-angle

conic-gradient() has more customization options, however this information is enough in order to create a pie chart .

Example 1 - Pie Chart with 3 Sections

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

<style>
.pie-chart {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: conic-gradient(red 0deg 120deg, orange 120deg 240deg, yellow 240deg 360deg);
}
</style>

Example 2 - Pie Chart with 4 Sections

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

<style>
.pie-chart {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: conic-gradient(red 0deg 90deg, orange 90deg 180deg, yellow 180deg 270deg, green 270deg 360deg);
}
</style>

Example 3 - Pie Chart with 3 Sections, Different Start Point

The default start point of the gradient is 0deg. However this can be changed by specifying the initial start angle.

/* start from 45 degrees */
div {
	background: conic-gradient(from 45deg, red 0deg 120deg, orange 120deg 240deg, yellow 240deg 360deg);
}

Note that the start angle will just set the initial position of the circle. Color stops can still be provided till 360 degrees.

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

<style>
.pie-chart {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: conic-gradient(from 45deg, red 0deg 120deg, orange 120deg 240deg, yellow 240deg 360deg);
}
</style>

Browser Compatibility

conic-gradient() is supported in all browsers — Firefox, Chrome, Edge & Safari.