Design a CSS gradient visually
Hand-writing gradient CSS means guessing at colour stops and angles and reloading to check. This generator lets you pick colours, positions, and direction and shows the gradient live, then gives you the exact CSS to copy. It's the fast way to land on a background that looks right without trial and error in your stylesheet.
How to use it
- Choose your colours and their stop positions.
- Set the type and angle — linear or radial.
- Copy the generated CSS into your stylesheet.
Tips
- Two close colours give a subtle sheen; distant ones give bold bands.
- Adjust stop positions to control where the blend happens.
- Radial gradients suit spotlights and soft highlights.
Questions people ask
Can I use more than two colours? Yes — add stops to create multi-colour gradients, each with its own position.
Is anything uploaded? No — the preview and CSS are generated in your browser.