CSS Gradient Generator

A CSS gradient is a background-image value painted by the browser itself — no asset, no round-trip, fully responsive — and CSS supports two linear and radial variants with up to any number of colour stops along a 0–100% axis. The generator exposes the levers you actually need: type (linear | radial), the linear angle (0–360°), and a dynamic list of colour stops with per-stop colour picker and position slider. Two stops minimum, more on demand, and stops are always emitted in sorted order so the output is identical regardless of how you added them.

Six presets cover the common cases: a '90deg indigo→purple' brand background, a 135° pink→coral hero, a 45° blue→cyan tech accent, a 180° green→mint fresh-feel, and two radial gradients (pink→yellow, teal→indigo). Each preset loads with a single click and updates the live preview plus the emitted CSS in one render — so A/B-ing palettes is a matter of clicking and copying. The output is `background: <gradient>;` and the Copy CSS button writes exactly that string to your clipboard.

Stops can be added, recoloured, repositioned, and removed (down to a 2-stop minimum). The preview panel shows a hero-sized block plus a thin 16-px bar — the bar reads the same gradient at a different aspect ratio, useful for verifying that a stop at, say, 60% does not vanish entirely when applied to a header strip. All computation, comparison and rendering happens in your browser; the gradient string is the only thing that leaves the page.