CSS gradient generator
Design linear and radial CSS gradients with a live preview and copy the ready-to-use CSS.
Runs 100% in your browserHow to make a CSS gradient
- Pick gradient type. Choose linear or radial and set the angle.
- Edit colour stops. Add stops, change colours and positions.
- Copy the CSS. Copy the generated background declaration.
About CSS gradients
CSS gradients render smooth colour transitions with no image files — they scale crisply, weigh nothing, and animate well. A linear gradient runs along an angle; a radial one spreads from a centre point. Each colour stop has a position from 0–100%, and adding intermediate stops lets you build multi-colour blends. Generate the colours first with the palette generator.
Frequently asked questions
- Linear and radial CSS gradients with two or more colour stops. You can set the angle for linear gradients and reposition every stop along the track.
- Yes — it generates the exact background property, including the gradient function, so you can paste it straight into your stylesheet.
- Yes. Add as many stops as you like and drag each stop's position; the preview and CSS update live.
- No. The gradient is rendered with native CSS in your browser and the CSS string is built locally.