Conic Gradient Generator

Build a CSS conic-gradient() with a live preview. Eight presets to start from, two to twelve colour stops placed at any angle, and a from slider that rotates the whole sweep. Copy the snippet when you like what you see. Pure client-side, nothing is uploaded.

Preset
Preview —
Stops

Drag the angle slider or type a number (0–360°). Stops are auto-sorted by angle when serialised.

CSS

How conic-gradient() works

A conic gradient sweeps colour stops around a center point in a circle. Angle 0deg is twelve o'clock and the sweep increases clockwise. The full syntax is conic-gradient([from <angle>] [at <position>], <stops>).

Common uses include pie charts (one colour per slice, with hard edges between adjacent stops), progress rings (a coloured arc up to the progress angle, then a neutral colour for the rest), colour wheels, loading spinners, and sunburst backgrounds.

Tips

  • Hard edges — to make a pie slice, give two adjacent stops the same colour with a tiny angular gap (e.g. 0deg and 120.001deg).
  • Full sweep — set the last stop to 360deg with the same colour as 0deg so the seam is invisible.
  • Off-center — at top left shifts the rotation pivot to the corner; useful for quarter-circle accents.