Skip to content

Conic Gradient

DesignGradients, Patterns and Effects
Colour edges
CSS —
Colours
—
Angle per colour
—
Start angle
—
Centre
—

List your colours, pick smooth or hard edges, and set the start angle and centre. The tool spreads the colours evenly round 360 degrees and writes the CSS. Four colours with hard stops give 90-degree slices: conic-gradient(red 0deg 90deg, yellow 90deg 180deg, lime 180deg 270deg, blue 270deg 360deg).

About this tool

A conic gradient sweeps colour around a point instead of along a line, which makes it the natural fit for colour wheels, pie charts, loading spinners and checkerboard-style backgrounds. Writing the stops by hand means dividing 360 by the number of colours and keeping every angle consistent. Here you type the colours one per line, choose whether they blend or meet at sharp edges, and drag the start angle and the centre. The tool returns a ready background declaration plus a table showing where each colour begins and ends. It only divides the circle evenly; for unequal slices, such as a pie chart with real data, edit the angles in the output by hand.

How to use it

  1. List the colours

    Type hex codes or CSS colour names in the box, one per line or separated by commas.

  2. Choose the edges

    Smooth blend fades the colours together; Hard stops cut equal pie slices.

  3. Set angle and centre

    Use the sliders to rotate where the sweep begins and to move its centre point.

  4. Copy the CSS

    Copy the background declaration and paste it into your stylesheet.

Examples

Four-colour pie chart

Colours, one per line
red yellow lime blue
Colour edges
Hard stops (pie)
Start angle
0
Centre, horizontal
50
Centre, vertical
50

Result CSS: background: conic-gradient(red 0deg 90deg, yellow 90deg 180deg, lime 180deg 270deg, blue 270deg 360deg);
Colours: 4
Angle per colour: 90deg
Start angle: 0deg
Centre: 50% 50%

  1. Each colour gets 360 ÷ 4 = 90 degrees of the circle.
  2. Hard stops give every colour a start and end angle, so edges are sharp like pie slices.
  3. The sweep starts at 0deg (0 is straight up, turning clockwise) around 50% 50%.

Hard stops split the circle into four 90-degree slices, the usual way to draw a pie chart in pure CSS.

Smooth red-green-blue wheel

Colours, one per line
#f00 #0f0 #00f
Colour edges
Smooth blend
Start angle
0
Centre, horizontal
50
Centre, vertical
50

Result CSS: background: conic-gradient(#f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg);
Colours: 3
Angle per colour: 120deg
Start angle: 0deg
Centre: 50% 50%

  1. Each colour gets 360 ÷ 3 = 120 degrees of the circle.
  2. Smooth stops place each colour at its start angle and repeat the first colour at 360deg so the loop closes without a seam.
  3. The sweep starts at 0deg (0 is straight up, turning clockwise) around 50% 50%.

Three colours sit 120 degrees apart and red returns at 360 degrees, so the wheel closes without a seam.

Rotated half-and-half, off centre

Colours, one per line
#000 #fff
Colour edges
Hard stops (pie)
Start angle
45
Centre, horizontal
25
Centre, vertical
75

Result CSS: background: conic-gradient(from 45deg at 25% 75%, #000 0deg 180deg, #fff 180deg 360deg);
Colours: 2
Angle per colour: 180deg
Start angle: 45deg
Centre: 25% 75%

  1. Each colour gets 360 ÷ 2 = 180 degrees of the circle.
  2. Hard stops give every colour a start and end angle, so edges are sharp like pie slices.
  3. The sweep starts at 45deg (0 is straight up, turning clockwise) around 25% 75%.

Starting at 45 degrees with the centre moved to the lower left gives a diagonal two-tone split.

How it is calculated

slice = 360 ÷ n; colour i starts at i × slice degrees

n
number of colours in the list
slice
angle each colour occupies, in degrees
i
position of the colour in the list, counting from 0

The circle is divided equally among the colours. In smooth mode each colour is placed at its start angle and the first colour is repeated at 360deg, so the end of the sweep matches the beginning. In hard mode each colour gets two angles, its start and end, which the CSS Images Level 4 syntax reads as a solid band. The optional from and at clauses are written only when you move the angle or centre away from their defaults of 0deg and 50% 50%.

When not to use it

  • For a pie chart whose slices must match real data, the equal division here is only a starting point.
  • For a gradient that runs from one edge to another, a linear gradient is simpler.

Common mistakes

  • Forgetting to repeat the first colour at 360deg, which leaves a hard seam at the top of a smooth wheel.
  • Expecting 0deg to point right as in maths; in CSS it points straight up and turns clockwise.
  • Applying the gradient to an element without equal width and height, which stretches the circle into an ellipse-looking sweep.

Frequently asked questions

Which browsers support conic-gradient()?

All current versions of Chrome, Edge, Firefox and Safari support conic-gradient(). Firefox added it in version 83 and Safari in 12.1, so only very old browsers need a fallback background colour.

Where does 0 degrees point in a conic gradient?

Straight up, at twelve o'clock, and angles increase clockwise. A start angle of 90deg therefore begins the sweep at three o'clock.

How do I make a pie chart with it?

Choose Hard stops. Each colour then gets a start and end angle, giving sharp slices. Add border-radius: 50% to a square element to turn the result into a round pie.

Why does my smooth gradient have a visible line at the top?

The last colour meets the first at 0deg. This tool repeats the first colour at 360deg to close the loop; if you edited the code and removed that stop, the line comes back.

Can I use colour names instead of hex codes?

Yes. CSS names such as teal, gold or rebeccapurple work, as do 3, 4, 6 and 8 digit hex codes. Up to 12 colours are accepted.

What does the centre setting change?

It writes an at clause that moves the point the colours rotate around. 50% 50% is the middle of the element; 0% 0% puts it in the top-left corner.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 26). Conic Gradient. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/gradients-patterns-and-effects/conic-gradient/

MLA

Tools Directory Editorial Team. “Conic Gradient.” Tools Directory, 26 Oct. 2026, https://tools.milunir.com/design/gradients-patterns-and-effects/conic-gradient/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Conic Gradient.” Tools Directory. Last modified October 26, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/gradients-patterns-and-effects/conic-gradient/.

Link<a href="https://tools.milunir.com/design/gradients-patterns-and-effects/conic-gradient/">Conic Gradient – Tools Directory</a>