CSS Gradient Generator
Build linear and radial CSS gradients and copy the code.
Gradients add depth and personality to modern interfaces. Pick your colours, choose linear or radial, set the angle, and this generator writes the background CSS for you — complete with a live preview.
Tips for great gradients
- Keep contrast between stops subtle for backgrounds, bolder for buttons and hero panels.
- Use two or three colour stops — more than that often looks muddy.
- Copy the CSS and paste it directly into your
backgroundproperty.
