CSS conic gradient: wheels, pie charts and sheen

A CSS conic gradient sweeps colour around a centre point, the way a clock hand sweeps around its face. Where a linear gradient changes along a line and a radial gradient changes outwards from the centre, conic-gradient() changes with the angle. It starts at the top, runs clockwise, and is used anywhere CSS takes an image. That makes it the natural tool for colour wheels, pie charts, loading rings and the angular highlights of brushed metal.

If you are choosing between gradient types for a design rather than learning the syntax, types of gradients and the design guide to conic gradients are better starting points.

The conic-gradient() syntax

/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)

Angles run clockwise from the top: 90deg is three o'clock, 180deg is six. The full definition is on MDN's conic-gradient() page. Browser support has been universal in current Chrome, Edge, Safari and Firefox for years, so no prefixes are needed.

Rotating and moving the sweep

from rotates the whole gradient, which is handy when the seam between the first and last colour would otherwise sit at the top. at moves the centre. Moving it to a corner turns the wheel into a fan of rays, and moving it off the box entirely gives a gentle angled wash that looks nothing like a wheel.

Pie charts and donut charts in CSS

Give every slice a start and an end, and let each start where the last one finished. Writing 0 as the second stop position is a shortcut: a position smaller than the previous one is clamped to it, so the new colour starts exactly where the last ended. Round the element with border-radius: 50%, and cut a hole with a radial mask to turn the pie into a donut.

.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}

Hard edges in conic gradients can look slightly jagged along the slice lines in some browsers. If it bothers you, leave a fraction of a degree between stops, such as #6366f1 0 39.8%, #22d3ee 40.2% 65%, so the edge gets a hair of blending.

Colour wheels with hue interpolation

A colour wheel usually needs six or seven stops. With interpolation methods you can ask the browser to travel the hue circle itself. longer hue takes the long way round between two hues, and when both stops are the same colour, the long way is the whole circle, so two reds make a full spectrum.

.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}

Metallic sheen and highlights

Real brushed metal and polished discs catch light in angular bands, which is exactly what a conic gradient draws. Alternate a few light and dark greys, uneven in spacing, and the surface reads as metal. Layered at low opacity over a colour, the same trick adds a sheen to buttons and cards; see gradient buttons for a worked example.

Repeating conic gradients for patterns

repeating-conic-gradient() repeats its stop list around the turn. Short, hard-edged stops give starbursts. Paired with background-size, a two-colour quarter pattern tiles into a checkerboard, a pattern that is otherwise awkward to draw with gradients. More in CSS patterns.

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}