# CSS conic gradient: wheels, pie charts and sheen

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

conic-gradient() sweeps colour around a point like the hand of a clock. That one idea draws colour wheels, pie charts, donut charts, metallic sheen and starbursts.

## The short version

- A CSS conic gradient places colours around a centre point, sweeping clockwise from the top, instead of along a line or outwards in rings.
- Colour stops in a conic gradient use angles or percentages of a full turn, so 25% and 90deg mean the same position.
- Hard stops turn a conic gradient into slices, which is the quickest way to draw a pie chart in CSS.
- The from keyword rotates where the sweep starts, and at moves the centre point.
- repeating-conic-gradient() repeats its stops around the circle and, combined with background-size, draws checkerboards and starbursts.

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.

A simple colour wheel: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Seven stops, spread evenly around a full turn. Repeating the first colour at the end closes the seam at the top.

If you are choosing between gradient types for a design rather than learning the syntax, [types of gradients](https://gradiently.design/guide/types-of-gradients) and the design guide to [conic gradients](https://gradiently.design/guide/conic-gradient) are better starting points.

## The conic-gradient() syntax

```css
/*               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%)
```

Everything before the first comma is optional. Both stop lists on the last two lines draw the same quarter slice.

| Part | Example | Default |
| --- | --- | --- |
| Start angle | `from 45deg` | `from 0deg`, straight up |
| Centre | `at 30% 50%`, `at top left` | `at center` |
| Interpolation | `in oklch`, `in hsl longer hue` | sRGB for hex colours |
| Stop position | `90deg`, `0.25turn`, `25%` | spread evenly around the turn |

The parts of conic-gradient(). Stop positions measure around the circle, not along a line.

Angles run clockwise from the top: `90deg` is three o'clock, `180deg` is six. The full definition is on [MDN's conic-gradient() page](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). 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.

- from 0deg, centred: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: seam at the bottom: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: a fan from the corner: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

The same indigo, violet and pink family, rotated and moved. In the corner version, a quarter turn fills the box.

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

```css
.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%);
}
```

A four-slice pie, and the one line that turns it into a donut. Use custom properties for the percentages if the data changes.

Pie slices: 40, 25, 20 and 15%: `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #f59e0b 0 85%, #e2e8f0 0)`

The pie's background on its own. On a round element it reads as a chart.

> **Charts need real text too** A gradient is an image, so screen readers cannot read its values. Put the numbers in text or a table next to the chart, or give the element `role="img"` and an `aria-label` that states them.

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.

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

One colour, twice, and a full rainbow in between. [OKLCH gradients](https://gradiently.design/guide/css-gradient-oklch) explain shorter and longer hue.

## 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](https://gradiently.design/guide/css-gradient-button) for a worked example.

- Brushed steel: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Gold disc: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Uneven light and dark bands swept around the centre read as polished metal.

## 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](https://gradiently.design/guide/css-patterns).

- Sunburst: `repeating-conic-gradient(#fbbf24 0 10deg, #f97316 10deg 20deg)`
- Night rays: `repeating-conic-gradient(from 45deg at 50% 50%, #0f172a 0 15deg, #1e293b 15deg 30deg)`

Short hard stops repeated all the way round.

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

A 16 pixel checkerboard: the classic transparency grid behind image editors.

## FAQ

### What is a conic gradient in CSS?

It is a gradient whose colours change with the angle around a centre point, starting at the top and moving clockwise, written with `conic-gradient()`.

### How do I make a pie chart with CSS?

Use hard stops in a conic gradient, such as `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, on an element with `border-radius: 50%`. Also put the values in text for screen readers.

### How do I rotate a conic gradient?

Add `from` and an angle as the first argument, for example `conic-gradient(from 90deg, ...)`. The sweep then starts at three o'clock instead of the top.

### Why are the edges of my conic gradient jagged?

Hard stops have no blending, and some browsers draw the boundary without smoothing. Leaving a fraction of a degree between neighbouring stops softens it.

### Do conic gradients work in all browsers?

Yes, current versions of Chrome, Edge, Safari and Firefox support `conic-gradient()` and `repeating-conic-gradient()` without prefixes.