CSS Conic Gradient: Syntax, Pie Charts, Color Wheels and Code Examples

A CSS conic gradient rotates colors around a center point rather than radiating outward. Where radial gradients expand in concentric rings, conic gradients sweep like clock hands making them the natural choice for pie charts, color wheels, progress rings, and starburst patterns. Browser support is now universal across Chrome, Firefox, Safari, and Edge, making conic-gradient a production-ready tool with no fallbacks needed for most projects.

Build conic gradients visually without writing syntax: Jaconir CSS Gradient Generator configure angle, position, and color stops in real time, then copy the CSS.

Basic Syntax

background: conic-gradient(color1, color2);

Colors rotate clockwise starting from the top (12 o'clock position) by default. Full syntax with all options:

background: conic-gradient(from angle at position, color1 stop, color2 stop);

The from Angle

Controls the starting rotation of the gradient. Default is 0deg which starts at the top (12 o'clock).

/* Default  starts at top */
background: conic-gradient(from 0deg, red, blue, red);

/* Start from right (3 o'clock) */
background: conic-gradient(from 90deg, red, blue, red);

/* Start from bottom (6 o'clock) */
background: conic-gradient(from 180deg, red, blue, red);

/* Start from left (9 o'clock) */
background: conic-gradient(from 270deg, red, blue, red);

The from angle is the most commonly misunderstood part of conic gradient syntax. 0deg points up, angles increase clockwise the opposite of standard mathematical convention but consistent with CSS transform rotate.

The at Position

Sets the center point of the rotation. Accepts any CSS position value.

/* Centered (default) */
background: conic-gradient(from 0deg at center, red, blue);

/* Off-center  creates an asymmetric sweep */
background: conic-gradient(from 0deg at 30% 50%, red, blue);

/* Corner positioned */
background: conic-gradient(from 0deg at top left, red, blue);

Color Stops and Hard Stops

Color stops in conic gradients use angle values or percentages not lengths like in linear/radial.

/* Percentage stops  evenly distributed */
background: conic-gradient(red 0%, blue 50%, red 100%);

/* Angle stops  explicit control */
background: conic-gradient(red 0deg, blue 180deg, red 360deg);

/* Hard stop  instant color change, no transition */
background: conic-gradient(red 0deg 180deg, blue 180deg 360deg);

/* Shorthand hard stop */
background: conic-gradient(red 50%, blue 50%);

Hard stops (where the same angle is listed twice, or two consecutive stops share the same position) are the key technique for pie charts and segmented designs.

Pie Charts

The most practical use of conic gradients. Each segment uses hard stops to create clean color boundaries:

/* 3-segment pie chart */
.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #667eea 0% 40%,      /* 40% segment */
    #f5576c 40% 70%,     /* 30% segment */
    #4facfe 70% 100%     /* 30% segment */
  );
}

Each segment is defined as color start% end%. The percentages must be continuous the end of one segment is the start of the next.

/* 5-segment pie  realistic data distribution */
.pie-chart {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: conic-gradient(
    #667eea 0% 32%,
    #f5576c 32% 55%,
    #4facfe 55% 72%,
    #f59e0b 72% 88%,
    #10b981 88% 100%
  );
}

Donut Charts

Add a mask or overlay circle to create a hollow center:

/* Method 1: Pseudo-element overlay */
.donut {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#667eea 0% 65%, #e5e7eb 65% 100%);
}

.donut::after {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: white; /* Match page background */
}

/* Method 2: CSS mask (cleaner, transparent center) */
.donut-mask {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#667eea 0% 65%, #e5e7eb 65% 100%);
  -webkit-mask: radial-gradient(circle, transparent 38%, black 39%);
  mask: radial-gradient(circle, transparent 38%, black 39%);
}

The mask method is better when the background isn't a solid color.

Progress Rings

A single-color conic gradient on a circle creates a progress indicator:

/* 75% progress ring */
.progress-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #667eea 0% 75%,
    #e5e7eb 75% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 45%, black 46%);
  mask: radial-gradient(circle, transparent 45%, black 46%);
}

For dynamic progress controlled by CSS custom properties:

.progress-ring {
  --progress: 75;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #667eea calc(var(--progress) * 1%),
    #e5e7eb 0%
  );
  -webkit-mask: radial-gradient(circle, transparent 45%, black 46%);
  mask: radial-gradient(circle, transparent 45%, black 46%);
}

/* Update progress with JS */
element.style.setProperty('--progress', 60);

Color Wheel

A full-spectrum color wheel using hsl values:

.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

Starburst and Checker Patterns

/* Starburst  alternating segments */
.starburst {
  background: conic-gradient(
    #667eea 0deg 30deg,
    transparent 30deg 60deg,
    #667eea 60deg 90deg,
    transparent 90deg 120deg,
    #667eea 120deg 150deg,
    transparent 150deg 180deg,
    #667eea 180deg 210deg,
    transparent 210deg 240deg,
    #667eea 240deg 270deg,
    transparent 270deg 300deg,
    #667eea 300deg 330deg,
    transparent 330deg 360deg
  );
}

/* Checker pattern using conic-gradient + background-size */
.checker {
  background:
    conic-gradient(#000 90deg, #fff 90deg 180deg, #000 180deg 270deg, #fff 270deg)
    0 0 / 40px 40px;
}

The checker pattern is one of the more surprising uses of conic-gradient it produces a repeating checkerboard without repeating-conic-gradient by using background-size to tile.

Repeating Conic Gradient

repeating-conic-gradient tiles the pattern around the full 360 degrees:

/* Repeating pie segments */
background: repeating-conic-gradient(
  #667eea 0deg 30deg,
  #764ba2 30deg 60deg
);

/* Fine repeating lines  pinwheel effect */
background: repeating-conic-gradient(
  #667eea 0deg,
  #667eea 1deg,
  transparent 1deg,
  transparent 10deg
);

Animating Conic Gradients

Like other CSS gradients, conic-gradient cannot be directly transitioned. Use a CSS custom property approach:

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  to { --angle: 360deg; }
}

.spinning-progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(from var(--angle), #667eea, transparent);
  animation: spin 2s linear infinite;
}

The @property rule (Houdini CSS) enables animating the custom property directly. Supported in Chrome and Edge use with progressive enhancement for Firefox.

FAQ

What is the difference between conic-gradient and radial-gradient?

conic-gradient sweeps colors around a center point like clock hands colors change as the angle changes. radial-gradient radiates colors outward from a center colors change as the distance from center changes. Conic is for pie charts, wheels, and angular patterns. Radial is for glows, spotlights, and depth effects.

Why does 0deg start at the top and not the right?

CSS conic gradients use the same angle convention as CSS transforms 0deg points up (12 o'clock), angles increase clockwise. This differs from standard mathematical angles where 0° points right and increases counter-clockwise. Use from 90deg if you want to start from the right.

Can I use conic-gradient for a loading spinner?

Yes with the @property animation technique shown above. For a simple spinning arc, combine conic-gradient with a mask to create a donut shape and animate the --angle custom property. For browsers without @property support, a rotating border or SVG is more reliable.

Is conic-gradient supported in all browsers?

Yes conic-gradient is supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. Coverage is above 96% globally. No prefix needed.

Conclusion

Conic gradients fill the gap between radial gradients and SVG for angular and pie-based designs. Hard stops create clean pie segments, the mask technique produces donut charts, and @property animation enables spinning progress rings all in CSS with no JavaScript or SVG required. The syntax is compact once you understand that stops use percentages or angles, and the from keyword controls starting position.

Generate your conic gradient: Jaconir CSS Gradient Generator →