# Conic gradients: colour wheels, charts and sheen

[Canonical HTML page](https://gradiently.design/guide/conic-gradient)

Linear gradients travel, radial gradients spread, and conic gradients turn. That one difference makes them the right tool for wheels, charts, metal and light beams.

## The short version

- A conic gradient changes colour as it rotates around a centre point, so its stops are angles rather than distances.
- Conic gradients are the natural way to draw colour wheels, pie and donut charts, metallic sheen and beams of light.
- Design tools often call the same thing an angular gradient.
- Every conic gradient has a sharp point at its centre and a seam where the circle closes, so both need handling.
- A conic gradient with hard stops becomes a chart, and with soft stops it becomes a surface that seems to catch light.

A **conic gradient** changes colour as it sweeps around a centre point, the way the hand of a clock moves around its face. A linear gradient changes along a line and a radial gradient changes as it moves outward, but a conic gradient changes with the angle. Look straight down on a cone painted in bands and you would see the same thing, which is where the name comes from. Figma and some other tools call it an **angular gradient**.

That angle-based behaviour makes conic gradients good at things other gradients cannot do: colour wheels, pie charts, brushed metal, starbursts and beams of light. This guide covers each one with live examples. The CSS syntax in full is in [CSS conic-gradient()](https://gradiently.design/guide/css-conic-gradient).

## How a conic gradient works

You set a centre, a starting angle and a list of colours with angles or percentages. Zero degrees points up, and the sweep runs clockwise. Where one colour ends and the next begins is a stop, exactly as in other gradients, except that 25% means a quarter turn, not a quarter of the width.

Colour wheel: `conic-gradient(from 0deg at 50% 50%, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)`

A full hue circle. The last colour repeats the first so the circle closes without a seam.

That repeat of the first colour at the end matters. If the last stop differs from the first, you get a hard line straight up from the centre where the sweep meets its own beginning. The [colour wheel](https://gradiently.design/guide/color-wheel) guide explains how to read the hues on a wheel like this one.

## Conic gradient examples for design

- Hard stops: chart slices: `conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%)`
- Brushed metal sheen: `conic-gradient(from 45deg at 50% 50%, #d4d4d8, #71717a, #f4f4f5, #52525b, #e4e4e7, #71717a, #d4d4d8)`
- Beam of light: `conic-gradient(from 160deg at 50% -10%, #0b0b14 0deg, #fde68a 20deg, #0b0b14 40deg)`
- Starburst: `repeating-conic-gradient(from 0deg at 50% 50%, #f97316 0deg 10deg, #fdba74 10deg 20deg)`
- Iridescent pastel: `conic-gradient(from 200deg at 60% 45%, #fbcfe8, #c7d2fe, #a5f3fc, #d9f99d, #fde68a, #fbcfe8)`
- Corner sweep: `conic-gradient(from 0deg at 0% 100%, #0f172a 0deg, #1d4ed8 45deg, #67e8f9 90deg)`

Six conic gradients. Hard stops make charts and bursts; soft stops make surfaces and light.

### Pie and donut charts

Give each colour a start and end angle and the gradient becomes a pie chart with no image and no charting library. Add a circular mask and it becomes a donut. This suits simple, decorative data on posts and slides. For real reporting, add labels, because a chart that relies on colour alone fails people who see colour differently.

```css
.donut {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 45%, 30% and 25% of the circle */
  background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
  /* cut out the middle */
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}
```

A donut chart in one element. Change the percentages to change the slices.

### Metal and sheen

Brushed steel, a vinyl record and a satin button all reflect light in wedges around their centre. Alternating light and dark greys around a conic gradient imitates that. Use four to six alternations; fewer looks like a beach ball, more looks like a chart. Tint the greys slightly warm for gold or brass and slightly blue for chrome.

### Beams and bursts

Put the centre above or outside the frame and a narrow bright wedge becomes a spotlight beam or a shaft of light through a window. A repeating conic gradient with alternating wedges becomes a sunburst, the retro sale-poster device. Keep bursts behind a large, simple headline; they are loud on their own.

### Iridescence

Real iridescence shifts hue with viewing angle. A soft conic sweep of pastels, with the centre off to one side, gets surprisingly close. It is the base of most [holographic gradients](https://gradiently.design/guide/holographic-gradients).

## Conic, radial or linear

| Type | Colour changes with | Best for |
| --- | --- | --- |
| Linear | Distance along a line | Skies, light from one side, simple brand fields |
| Radial | Distance from a centre | Spotlights, glows, vignettes |
| Conic | Angle around a centre | Wheels, charts, sheen, beams, bursts |

Each type answers a different question about where colour changes.

If you are unsure, ask what the light in your picture is doing. Light falling across a surface is linear. Light coming from a source is [radial](https://gradiently.design/guide/radial-gradient). Light reflecting off something turning or curved is conic. [Types of gradients](https://gradiently.design/guide/types-of-gradients) shows all of them side by side.

## Getting conic gradients right

1. **Decide where the centre goes** A centred conic gradient looks like a chart or a wheel. Moving the centre to a corner or outside the frame turns it into light and sheen.
2. **Close the circle** Repeat the first colour at the end unless you want a visible seam. Hard seams are for charts and bursts only.
3. **Hide or soften the point** Every conic gradient pinches to a sharp point at its centre. Put a logo, a circle or the edge of the frame over it, or blur the layer.
4. **Use a starting angle** Rotating the start with `from` moves where the brightest wedge falls, which is often all a composition needs.
5. **Combine with other types** A subtle conic sheen over a linear or radial base adds a sense of material without drawing attention to itself.

### Avoid

- A rainbow wheel as a background behind text
- A sharp centre point sitting in plain view
- A seam where the last colour does not match the first
- Charts where colour is the only way to tell slices apart

### Do

- Short, related arcs of colour for surfaces
- The centre hidden behind an object or off the canvas
- The first colour repeated at the end
- Labels or patterns alongside chart colours

Conic gradients also make patterns: a repeating version with four hard quarters draws a checkerboard in one line. [CSS patterns](https://gradiently.design/guide/css-patterns) covers those.

## FAQ

### What is a conic gradient?

A conic gradient changes colour as it rotates around a centre point, so its colour stops are set by angle rather than distance.

### Is a conic gradient the same as an angular gradient?

Yes. Figma and several other design tools call it an angular gradient; CSS calls it a conic gradient.

### How do I make a pie chart with a conic gradient?

Give each colour a start and an end position with hard stops, for example violet from 0% to 45% and pink from 45% to 75%. Add labels so the chart does not depend on colour alone.

### Why is there a line at the top of my conic gradient?

The sweep starts and ends at the same angle. If the last colour differs from the first, a seam appears there; repeat the first colour at the end to remove it.