conic-gradient and the modern CSS gradient toolbox

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, 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.

.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:

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:

.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:

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 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:

.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:

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:

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 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.

Related posts about css: