CSS Gradient Generator

Design gradients you can see as you build

Gradients add depth and personality to backgrounds, buttons, cards, and hero sections, but getting the colours and angle right by editing raw CSS is slow guesswork. This generator shows a live preview of exactly what you are building: change the angle, nudge a stop, or swap a colour and the preview and the output CSS update together. When it looks right, copy the background declaration and paste it straight into your stylesheet — no libraries, no build step.

Linear, radial, and color stops

Use a linear gradient when you want colours to flow in a single direction; the angle control (in degrees, clockwise from straight up) sets that direction, so 90deg runs left to right and 180deg runs top to bottom. Switch to radial for a centre-out blend that suits glows, spotlights, and soft vignettes. Add as many colour stops as you like and position each one along the 0–100% track to create smooth two-colour fades or bold multi-colour transitions. The tool keeps at least two stops because every gradient needs a start and an end.

Presets and clean output

Not sure where to start? The presets give you tasteful linear and radial combinations you can apply with one click and then customise. Whatever you build, the generated CSS uses the standard linear-gradient() and radial-gradient() functions supported by every modern browser, with stops written as color percentagepairs. That means the value is portable: it works in plain CSS files, CSS-in-JS, inline styles, and design tools alike.