Gradients make buttons, banners and backgrounds look modern. Writing the CSS by hand means a lot of guessing, but a visual tool is quick.
Try it now: CSS Gradient Generator
Free, no sign up, and the file stays on your device.
Open CSS Gradient GeneratorHow to build a gradient
- Open CSS Gradient Generator.
- Choose linear or radial.
- Pick your colours and move the position sliders. Add up to five colours.
- For linear gradients, set the angle.
- Copy the CSS and paste it in your stylesheet.
Tips
- Use colours that are close on the colour wheel for a smooth look.
- 90 degrees goes left to right and 180 degrees goes top to bottom.
- Keep text readable on top of the gradient.
Frequently asked questions
Is anything uploaded?
No. Everything is calculated in your browser, so what you type stays on your device.
Ready to start?
Open CSS Gradient Generator