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.
On this page
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().
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.
conic-gradient(from 0deg at 50% 50%, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)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 guide explains how to read the hues on a wheel like this one.
Conic gradient examples for design
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.
.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%);
}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.
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 |
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. Light reflecting off something turning or curved is conic. 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
frommoves 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 covers those.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
