CSS Gradient Generator

The CSS Gradient Generator builds linear and radial gradients from a list of colour stops and gives you the ready-to-use background declaration.

Add as many stops as you like, choose each colour with a picker or by typing a value, set where each stop sits as a percentage, and for linear gradients spin the angle dial to point the gradient any direction.

A live swatch shows the result the moment you change anything.

Gradients are everywhere in modern interfaces — hero backgrounds, buttons, badges, subtle panel fills — but hand-writing the syntax is error-prone, especially once you have three or more stops with specific positions.

This tool keeps the stops in order, clamps positions to a sensible 0–100 range, and refuses to emit an invalid gradient with fewer than two colours, so you always get something that actually renders.

Switching between linear and radial is a single click.

It is the quickest way to prototype a background, match a design comp, or experiment until a colour blend feels right.

Each stop has its own colour and position so you can build smooth two-colour fades or sharp multi-band transitions.

The whole thing runs in your browser with no network calls, and the generated value copies straight into your CSS as a background property.