# conic-gradient and the modern CSS gradient toolbox

> Learn how conic-gradient works and what changed in CSS gradients: pie charts with hard stops, color wheels, repeating patterns and oklch interpolation.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2026-08-03 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/css-conic-gradients/

CSS has three gradient functions: `linear-gradient()`, `radial-gradient()` and `conic-gradient()`.

The first two have been around forever. I covered them in [CSS backgrounds](https://flaviocopes.com/css-backgrounds/), so I won't repeat the basics here.

This post is about the third one, `conic-gradient()`, plus a few things that changed recently in how gradients work.

## What a conic gradient is

A linear gradient moves colors along a line. A radial gradient moves them outward from a center point.

A conic gradient rotates colors *around* a center point, like the hands of a clock sweeping over the colors.

```css
.circle {
  background: conic-gradient(#e74c3c, #f39c12, #2ecc71, #3498db, #e74c3c);
}
```

The gradient starts at the top (12 o'clock) and goes clockwise. Notice the last color repeats the first one. Without that, you'd get a hard seam at the top where the end color meets the start color.

Add `border-radius: 50%` and you have a color wheel.

## Angle and position

You can control where the sweep starts with `from`, and where the center sits with `at`:

```css
background: conic-gradient(from 90deg at 25% 25%, #1a1a2e, #e94560);
```

This starts the rotation at 3 o'clock, with the center in the top-left quadrant.

## Pie charts with hard stops

Here's where conic gradients earn their place. A **hard stop** is when two colors share the same position, so instead of blending, the color switches instantly.

Give each color a start and end position, and you get slices:

```css
.pie {
  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #e94560 0% 40%,
    #f5a623 40% 70%,
    #1a1a2e 70% 100%
  );
}
```

That's a pie chart: 40%, 30%, 30%. No SVG, no canvas, no charting library. One CSS declaration.

The `#e94560 0% 40%` syntax is a shorthand for two stops at once (`#e94560 0%, #e94560 40%`). It works in all gradient types and it's the cleanest way to write hard stops.

## Repeating conic gradients

Wrap any gradient in its `repeating-` variant and the stop list tiles until it fills the element:

```css
background: repeating-conic-gradient(
  #111 0deg 15deg,
  #eee 15deg 30deg
);
```

This gives you a starburst pattern: alternating dark and light wedges, 12 pairs around the circle. The same trick with `repeating-linear-gradient` gives you stripes, which I use all the time for subtle section separators.

I built a [gradient generator tool](https://flaviocopes.com/tools/gradient-generator/) where you can switch between linear, radial and conic, toggle hard stops and repeating on and off, and copy the resulting CSS. Playing with the angle slider on a conic gradient is the fastest way to build intuition for how the sweep works.

## Gradient borders

One more practical conic trick. You can't set a gradient as `border-color`, but you can paint one in the border area using `border-image`... or, more flexibly, layer two backgrounds:

```css
.card {
  border: 4px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 0deg, #e94560, #f5a623, #e94560) border-box;
}
```

The first background covers the padding area with a solid color. The second one, the conic gradient, shows through only in the transparent border. Animate the `from` angle with a custom property and you get a rotating gradient border.

## What changed: interpolation color spaces

This is the big recent upgrade, and it applies to all three gradient types.

By default, browsers blend gradient colors in sRGB. That's why a gradient from blue to yellow passes through a muddy gray in the middle. The straight line between those two colors in sRGB space happens to cross a desaturated zone.

Now you can tell the browser which color space to interpolate in:

```css
background: linear-gradient(in oklch, blue, yellow);
```

`oklch` is a perceptual color space: distances in it match how our eyes perceive color differences. The blue-to-yellow gradient stays vivid the whole way through, passing through greens instead of gray.

The syntax works in conic gradients too:

```css
background: conic-gradient(in oklch longer hue, red, red);
```

This one is a party trick worth knowing: from red to red, but taking the *longer* route around the hue wheel. You get a full rainbow with two color stops.

My advice: when a gradient between two saturated colors looks washed out in the middle, add `in oklch` and see if it fixes it. It usually does.

## Sizing the element

Conic gradients almost always go on square or circular elements: pie charts, color wheels, spinners. The [aspect-ratio property](https://flaviocopes.com/how-to-embed-youtube-videos-correct-aspect-ratio/) makes that easy — `aspect-ratio: 1` and a width is all you need, as in the pie chart example above.

## Browser support

`conic-gradient()`, the two-position hard stop syntax, and `repeating-conic-gradient()` work in every current browser. The `in oklch` interpolation syntax also has full support in modern browsers, so unless you support very old versions, you can use all of this today.