CSS Conic Gradients Explained

What Is a Conic Gradient?

A conic gradient sweeps colors around a center point, like the slices of a pie chart or the hues on a color wheel. Unlike linear gradients that transition along a line or radial gradients that expand outward in circles, conic gradients rotate color stops around an origin angle — producing patterns that are impossible to replicate with the other two types.

The conic-gradient() function is supported in all modern browsers and works anywhere CSS accepts an <image> value — most commonly in background properties.

Syntax and Color Stops

The full syntax gives you control over the center position, starting angle, and color transition points:

background: conic-gradient(
  from 45deg at 50% 50%,
  #f00 0deg,
  #ff0 90deg,
  #0f0 180deg,
  #00f 270deg,
  #f00 360deg
);

• from — sets the starting angle (defaults to 0deg, which is straight up).
• at — positions the center point (defaults to center).
• Color stops — specify colors at angle positions around the circle.

You can omit the angles entirely for equal distribution:

background: conic-gradient(red, yellow, green, blue, red);

This divides the 360-degree sweep evenly among the five stops.

Hard Stops for Pie Slices

When two color stops share the same angle, you get a hard edge — perfect for pie-chart-like visuals:

background: conic-gradient(
  #4caf50 0deg 120deg,
  #2196f3 120deg 240deg,
  #ff9800 240deg 360deg
);

Each color occupies exactly one-third of the circle with no blending between them.

Building a Pie Chart

You can create a simple CSS-only pie chart by combining hard stops with border-radius: 50%:

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0deg 150deg,
    #22d3ee 150deg 240deg,
    #f472b6 240deg 360deg
  );
}

To add a label in the center, overlay a smaller circle:

.pie-chart::after {
  content: "42%";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: white;
  display: grid;
  place-items: center;
  font-weight: 600;
}

This "donut chart" pattern is a common way to foreground a key metric inside the ring.

Color Wheels and Hue Rotations

A conic gradient cycling through all hues produces a color wheel:

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%)
);

This is useful for color picker UIs or as a visual reference when working with HSL values.

Spinner and Loading Effects

Conic gradients shine in loading animations. A common spinner uses a fade from a solid color to transparency:

.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(#6366f1 0deg, transparent 270deg);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

The gradient fades out before completing the circle, so the "tail" disappears — creating a convincing spinning effect with just one element and no extra markup.

Repeating Conic Gradients

The repeating-conic-gradient() function tiles the gradient pattern, producing ray or starburst effects:

background: repeating-conic-gradient(
  #1e1b4b 0deg 30deg,
  #312e81 30deg 60deg
);

This alternates two dark colors every 30 degrees, creating 12 identical slices. It works well for decorative backgrounds or subtle texture overlays.

Comparison: Conic vs Repeating Conic

Common Mistakes

• Forgetting to close the circle — if your last color stop is less than 360deg, the remaining angle fills with the last color. This is often unintended.
• Using percentages instead of degrees — conic-gradient uses angle units (deg, rad, turn), not percentages like linear and radial gradients.
• Not setting border-radius — without it, you get a square with a conic pattern, not a circle.

Key Takeaways

• Conic gradients rotate color around a center point, unlike linear (along a line) or radial (outward from center).
• Hard stops at the same angle create pie-slice effects with no blending.
• from and at keywords let you control starting angle and center position.
• repeating-conic-gradient() tiles the pattern for ray and starburst effects.
• Always use angle units (deg, turn) for color stops, not percentages.
• Pair with border-radius: 50% for circular visuals like pie charts and spinners.

Try It Yourself

Experiment with conic gradient angles, color stops, and center positions in real time using the CSS Gradient Generator.