Conic gradient CSS generator

Sweep colours around a point for colour wheels, loaders, pie charts and glossy metal effects. Set the start angle, drag the centre and copy conic-gradient().

AaText over this gradient
linear · 135° · in oklch
#ff2d87 · 0%
#ffb800 · 100%

Click the strip to add a stop · drag handles to move · arrow keys nudge (Shift = 10%)

#ff2d87 · rgb(255 45 135) · hsl(334 100% 59%) · oklch(66.1% 0.245 1.9)

deg
Contrast audit worst 1.73:1

Range across the gradient: 1.73 to 3.51:1. Weakest point at 100% (#ffb800). Fails AA somewhere — text over that area will be hard to read.

Nearest text colour that passes 4.5:1 across the whole gradient:

Export

.gradient {
  background: linear-gradient(135deg, #ff2d87 0%, #ff457b 8.3%, #ff5671 16.7%, #ff6469 25%, #ff7061 33.3%, #ff7b5b 41.7%, #ff8555 50%, #ff8e4f 58.3%, #ff9749 66.7%, #ff9f43 75%, #ffa83a 83.3%, #ffb02b 91.7%, #ffb800 100%);
  background: linear-gradient(in oklch 135deg, #ff2d87 0%, #ffb800 100%);
}

The first line is a pre-blended fallback for browsers without “in oklch” support (pre-2023); the second line is the native version.

From sweep to pie chart

In a conic gradient every stop is an angle. When two neighbouring stops share an angle, the browser has zero degrees to blend in — so you get a hard edge. Chain those hard edges together and you have a pie chart in one line of CSS, with no SVG and no JavaScript.

Move the sliders to resize the slices: the code converts each value into start and end angles. Untick “hard stops” to see the same colours blend into a sweep instead.

background: conic-gradient(from 0deg, #d6007a 0deg 144deg, #0078bf 144deg 234deg, #ffb800 234deg 306deg, #1d1418 306deg 360deg);
border-radius: 50%;

conic-gradient() recipes

/* Colour wheel */
background: conic-gradient(in oklch longer hue, oklch(70% .2 0), oklch(70% .2 0));

/* Progress ring (72%) */
background: radial-gradient(closest-side, #fff 78%, #0000 80%),
            conic-gradient(#d6007a 72%, #eee 0);

/* Checkerboard */
background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 20px 20px;

Questions

What is a conic gradient?

A conic gradient sweeps colours around a centre point, like the hand of a clock, instead of outward (radial) or along a line (linear). Positions are angles: 0deg is 12 o’clock and values increase clockwise.

What is the syntax of conic-gradient()?

conic-gradient([from <angle>]? [at <position>]? [in <colour-space>]?, <angular-colour-stops>). Example: conic-gradient(from 90deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red).

How do I make a pie chart with CSS?

Use hard stops, where each colour starts where the previous one ends: conic-gradient(#d6007a 0 40%, #0078bf 40% 65%, #ffb800 65% 85%, #1d1418 85%). Add border-radius: 50% to make it round. The explainer on this page writes the code for you.

Is conic-gradient() supported in all browsers?

Yes, every current browser has supported it since 2021 (Chrome 69, Safari 12.1, Firefox 83). SVG has no conic gradient, so export it as PNG if you need an image file.

How do I make a smooth colour wheel?

Repeat the first colour at the end so the seam disappears: conic-gradient(in oklch longer hue, red, red). The “longer hue” keyword makes the browser travel all the way around the hue circle.