How to use the gradient generator
- Pick linear (a straight sweep) or radial (radiating from the centre).
- Set the angle, then drag each colour stop to position it.
- Add as many stops as you like, then copy the CSS straight into your stylesheet.
Understanding the angle
In CSS, a linear gradient's angle describes the direction the gradient travels toward. 0deg points straight up, 90deg points right, 180deg down. That's why 135deg — the most-used value in modern UI design — runs diagonally from top-left to bottom-right. Colour stops are percentages along that line, so 0% is the start and 100% the end.
Making gradients that look good
The most common mistake is picking two colours from opposite sides of the colour wheel, which produces a muddy grey band where they meet. Gradients look best between colours that are near each other in hue — blue to purple, orange to pink — or between two shades of the same colour. If you must blend distant hues, add a third stop in between to steer the transition through a colour you actually want.
Benefits
- Build linear and radial gradients visually with an instant preview.
- Add up to eight colour stops and drag each one into position.
- One-click presets and a random generator for quick inspiration.
- Copies clean, unprefixed CSS ready to paste.
Limitations to know
- It generates the CSS background value, not a downloadable image file.
- Conic gradients and complex multi-layer backgrounds are not covered.
- Very close colour stops over a wide area can show visible banding.
Common mistakes to avoid
- Blending two opposite hues, which produces a muddy grey band in the middle.
- Adding vendor prefixes that modern browsers no longer need.
- Putting text over a gradient without checking contrast at both ends.
Alternatives
For solid colour schemes use the Color Palette Generator; check readability with the Contrast Checker.
Last updated: August 2026 · Reviewed by the AI Toolbox editorial team.
Frequently asked questions
Do I need vendor prefixes?
No. Every current browser supports unprefixed linear-gradient() and radial-gradient().
Why does my gradient look banded?
Banding shows when two stops are very close in colour over a large area. Adding a subtle third stop or increasing the colour difference usually fixes it.
Can I use a gradient on text?
Yes — set it as background and add background-clip: text with a transparent text colour.
Is anything uploaded?
No — everything is generated in your browser.