CSS conic-gradient Syntax for Pie Charts

The CSS conic-gradient() function allows developers to create native, lightweight pie charts using pure CSS without relying on SVG or external JavaScript libraries. By rotating color transitions around a central anchor point and utilizing hard color stops, you can render sharp, distinct slices representing numerical data. This article outlines the fundamental syntax of conic-gradient(), explains how to define distinct segments, and provides practical code examples for building circular pie charts.

The Basic Syntax of conic-gradient()

A conic gradient transitions colors around a central point, starting from the top (12 o’clock position) and moving clockwise by default. The standard syntax structure is:

conic-gradient( [from angle] [at position], color-stop1, color-stop2, ... );

• from angle (optional): Defines the starting angle. Default is 0deg (pointing up).
• at position (optional): Defines the center of the gradient. Default is 50% 50% or center.
• color-stop: Defines the color and the positions (in percentages or degrees) where that color begins and ends.

Creating Distinct Slices with Hard Color Stops

By default, gradients smoothly blend transitions between colors. To create a pie chart, you must eliminate blending by setting "hard stops." A hard stop occurs when the start position of a new color matches the end position of the preceding color.

You can declare both the start and end values for each slice directly:

background: conic-gradient(
  #4caf50 0% 40%,    /* Green slice: 0% to 40% */
  #2196f3 40% 75%,   /* Blue slice: 40% to 75% */
  #ff9800 75% 100%   /* Orange slice: 75% to 100% */
);

If you specify 0 as the start value of the next slice, modern CSS will automatically snap it to the highest preceding stop, achieving the same result:

background: conic-gradient(
  #4caf50 40%,
  #2196f3 0 75%,
  #ff9800 0
);

Complete Pie Chart Implementation

To turn the gradient into a circular pie chart, apply the conic-gradient() to an element with equal width and height, then set border-radius: 50%.

HTML

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

CSS

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #e63946 0% 25%,
    #f1faee 25% 55%,
    #a8dadc 55% 70%,
    #457b9d 70% 100%
  );
}

Using Angular Units (Degrees and Turns)

While percentages (%) are standard for datasets totaling 100, conic-gradient() also supports degrees (deg) and turns (turn).

/* Using degrees for a 360-degree circle */
background: conic-gradient(
  crimson 0deg 90deg,
  gold 90deg 270deg,
  teal 270deg 360deg
);

/* Using turns */
background: conic-gradient(
  crimson 0turn 0.25turn,
  gold 0.25turn 0.75turn,
  teal 0.75turn 1turn
);

Making Charts Dynamic with CSS Variables

You can pass dynamic data directly to your pie chart using inline CSS custom properties (variables), keeping your stylesheet reusable across different data sets:

<div class="pie-chart" style="--slice-1: 30%; --slice-2: 70%;"></div>

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3a86ff 0% var(--slice-1),
    #ff006e var(--slice-1) var(--slice-2),
    #fb5607 var(--slice-2) 100%
  );
}