CSS Gradient Generator

A CSS gradient generator lets you design a colour transition visually instead of writing gradient syntax by hand. Gradients are used for backgrounds, hero sections, buttons, overlays on images and decorative shapes, and they're drawn by the browser, so they cost no image download.

Choose linear, radial or conic, set the angle, then edit up to six colour stops with a picker and a position slider while the preview updates. The CSS includes a solid fallback colour, and the link keeps your gradient so you can come back to it.

linear-gradient blends along a line at the given angle, where 0deg points up and 90deg points right. radial-gradient spreads outward from the centre, and conic-gradient sweeps around a point like a pie chart. Each stop is a colour at a percentage along the gradient.

The output puts a plain background colour first, so anything that can't draw gradients still shows a sensible colour. Gradients are drawn by the browser, so they stay sharp at any size and add nothing to page weight.