CSS Conic Gradient — Syntax, Color Wheel & Pie Chart Guide

Updated: May 2026

The conic-gradient() function sweeps colors around a central point like clock hands, producing pie charts, color wheels and radial progress indicators — all in pure CSS, without a single line of SVG or JavaScript.

Open the CSS Gradient Generator →

Free · No upload · In your browser

Syntax

background: conic-gradient(
  from <angle> at <position>,
  <color-stop>,
  <color-stop>
);

Both from and at are optional. Without them, the gradient starts at 0deg (12 o'clock) and is centered:

background: conic-gradient(#667eea, #764ba2, #667eea);

Building a pie chart

Hard-edge stops (same position for two consecutive colors) slice the circle into clean segments. Positions use percentages or angle units:

/* 3-segment pie: 40% / 35% / 25% */
background: conic-gradient(
  #e74c3c 0% 40%,
  #3498db 40% 75%,
  #2ecc71 75% 100%
);

Apply border-radius: 50% to the element to display it as a circle. Pair it with a white inner circle (::after) to create a donut chart.

/* Donut via pseudo-element */
.donut { position: relative; width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(#e74c3c 0% 40%, #3498db 40% 75%, #2ecc71 75%); }
.donut::after { content: ''; position: absolute; inset: 25%;
  background: var(--bg); border-radius: 50%; }

For accessible charts, always add a visually hidden table or an aria-label with the data values. The gradient is visual-only and conveys no information to screen readers.

Color wheel

A full hue rotation maps perfectly to conic gradients. Cycle through hsl hues from 0 to 360:

background: conic-gradient(
  hsl(0,100%,50%), hsl(60,100%,50%),
  hsl(120,100%,50%), hsl(180,100%,50%),
  hsl(240,100%,50%), hsl(300,100%,50%),
  hsl(360,100%,50%)
);

color wheel

from 90deg

pie chart

Progress ring / radial progress bar

A single-color conic gradient paired with a grey fallback makes a smooth radial progress indicator. Drive the percentage with a CSS custom property:

/* CSS custom property approach */
.progress { --pct: 65%; border-radius: 50%; width: 80px; height: 80px;
  background: conic-gradient(#667eea var(--pct), #333 var(--pct)); }

/* In JS: el.style.setProperty('--pct', value + '%'); */

This pattern avoids SVG entirely and is easily animated with a CSS @property declaration in modern Chromium and Firefox.

Repeating conic gradient

repeating-conic-gradient() tiles the pattern around the full rotation:

background: repeating-conic-gradient(
  #667eea 0deg 30deg,
  #764ba2 30deg 60deg
);

This is ideal for pinwheel patterns, checkerboard-like fills on round elements, and radar sweep animations.

Browser support

Conic gradients have excellent modern browser support: Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. They cover over 95% of global users as of 2026. The repeating-conic-gradient() variant has the same support. No prefix is required.

For older browsers you can provide a fallback background-color or a linear-gradient approximation before the conic value, since unrecognised values are ignored.

Frequently asked questions

What is conic-gradient used for?

Its most common uses are pie charts, donut charts, radial progress indicators and color wheels — all without JavaScript or SVG. It is also used for decorative angular patterns and pinwheel effects on non-circular elements.

How do I make a sharp edge in a conic gradient?

Specify the same position for two consecutive stops: conic-gradient(red 0% 40%, blue 40% 100%). The two identical positions create a hard edge with no blur between the colors.

What does "from <angle>" do in conic-gradient?

It rotates the starting point of the gradient. from 0deg starts at the top (12 o'clock). from 90deg starts at the right (3 o'clock). It is equivalent to rotating the element, but without affecting the element's layout or transform.