A generator for conic-gradient and nothing else
A conic-gradient sweeps color clockwise around a center point, which is what pie charts, color wheels and spinning borders need. Enter a start angle, the center coordinates and two to five color stops, and the full function is written out for you. The preview can be switched between a rectangle and a circle so you can see how the sweep lands on the shape you actually use.
The syntax follows the conic-gradient definition in the W3C CSS Images specification: angles in deg, center and stop positions as percentages. Choosing the repeating option changes only the function name to repeating-conic-gradient while the argument structure stays the same. As of October 2026 major browsers support it unprefixed, so no prefixed duplicate line is emitted.
This page covers conic-gradient only. It does not output linear-gradient or radial-gradient, and it does not stack multiple background layers. Other Simplewoody tools handle those. It also does not suggest attractive color combinations, so the colors and angles are entirely yours to choose.
Frequently asked questions
This tool is conic-gradient only. Linear and radial gradients are covered by a separate Simplewoody gradient generator, so they are not emitted here.
Give the end of one stop and the start of the next the same position value. The colors then meet at a line instead of fading into each other.
CSS clamps any position below the previous one up to that previous value. That creates an unintended hard edge, so this tool flags reversed stops in the result.