Conic Gradient Generator

A conic gradient sweeps its colours around a centre the way a clock hand sweeps the face, which makes it the one gradient that can draw a pie slice, a colour wheel or a loading ring without an image or a library. This builder gives you a live preview on an ellipse, square, rectangle or pie shape, sliders for the from angle and the at centre, and stops you can add, drag and recolour.

The generated CSS writes stop positions as percentages, and in conic-gradient() 100% is a full turn — so 25% is exactly 90deg and 33.33% is 120deg, which is the conversion you need when turning real proportions into a chart. The output also drops whatever is already the default: no from clause when the angle is 0, no at clause when the centre is 50% 50%, so what you copy is the shortest CSS that means what the preview shows.

Two stops at the same position produce a hard edge instead of a blend, which is how the pie and quadrant presets work. Two things that surprise people: colours are interpolated in sRGB by default, so a stop of red followed by a stop of green passes through a muddy olive rather than through the hues between them — a seven-stop rainbow approximates a colour wheel, it is not one; and the stop boundaries sit at true angles regardless of the box, so stretching a pie into a rectangle keeps each boundary pointing where it did while changing how much area each wedge covers. A proportion only reads correctly in a square. Supported in Chromium 69+, Firefox 83+ and Safari 12.1+.