Create Pie Chart using CSS – Stunning CSS

thumbnail

In this tutorial, you will learn to create pie chart using CSS. We will use conic-gradient and it is similar to a radial gradient. Both are circular and use the center of the element as the source point for color stops. However, where the color stops of a radial gradient emerge from the center of the circle, a conic gradient places them around the circle. The css code is shown below:

.pie-chart1{
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-image: conic-gradient(
		gold 72deg,
		steelblue 0 234deg,
		orange 0
	);
}
.pie-chart2{
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: conic-gradient(
     red 36deg, 
	 orange 36deg 170deg, 
	 yellow 170deg);
}

The full code is available below:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pie-chart1{
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-image: conic-gradient(
		gold 72deg,
		steelblue 0 234deg,
		orange 0
	);
}
.pie-chart2{
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: conic-gradient(
     red 36deg, 
	 orange 36deg 170deg, 
	 yellow 170deg);
}
</style>
</head>
<body>
 
<h2>Pie Chart - Stunning CSS </h2>
<br>
<div class="pie-chart1"></div>
<br>
<div class="pie-chart2"></div>
</body>
</html>

The output when you open it in the browser:

Back To Top