Overview
Few CSS features do as much work as the humble linear-gradient: hero backgrounds, buttons, cards and overlays all get depth and energy from a smooth blend, with no image files, no requests and no resolution limits. This generator lets you build one visually — pick two or three colours, set the angle, and watch the blend update live.
When it looks right, copy the CSS. The output uses the standard syntax every modern browser understands, and it includes a flat fallback colour declared first, so even ancient browsers show something intentional instead of nothing.
What is a CSS gradient?
A gradient is a smooth transition between two or more colours, computed pixel by pixel. In a linear gradient, the browser draws an imaginary line at your chosen angle and blends the stop colours along it: at 0% you see the first colour, at 100% the last, and every point between is the proportional mix. It is pure arithmetic — no image, infinitely scalable, and typically a single line of CSS.
The comeback of gradients in modern design is no accident. Flat design's strict minimalism softened into depth done cheaply: gradients add richness without photographs, keep file sizes at zero, and adapt to any screen density because they are resolution-independent by construction.
Features
- Two or three colour stops with individual pickers, blended smoothly.
- Live preview — drag any control and watch the gradient update instantly.
- Angle control for the blend direction, from subtle to dramatic.
- Copy-ready CSS in the standard linear-gradient syntax.
- Flat fallback colour included for browsers that predate gradients.
- HEX values shown for every stop, easy to reuse elsewhere.
- Fully local — rendering happens in your browser; nothing is uploaded.
Benefits
- Modern look, zero images. Gradients are resolution-independent and tiny.
- Copy-paste CSS. The code drops straight into any stylesheet.
- Safe fallback included. Old browsers get a solid colour, not a broken page.
- Private experimenting. Client colour schemes stay on your device.
Who can use it
Web developers styling heroes, buttons and cards; designers prototyping backgrounds; bloggers dressing up headers; email developers (with fallbacks!) adding flair to templates; and students learning CSS visuals hands-on. Anyone who has ever downloaded a gradient image can replace it with one line of code after five minutes here.
How to use
- Pick your two (or three) stop colours with the colour pickers.
- Set the angle for the direction of the blend.
- Watch the live preview update as you adjust.
- Copy the generated CSS into your stylesheet.
- Keep the flat fallback declaration above it for older browsers.
Frequently asked questions
What is the difference between linear and radial gradients?
Linear gradients blend along a straight line at your chosen angle; radial gradients blend outward from a centre point, like light falling on a sphere. Linear is the workhorse for backgrounds and buttons; radial suits glows, vignettes and spotlight effects. This tool focuses on linear — the one you will reach for ninety percent of the time.
Do gradients work in old browsers?
That flat fallback colour is there precisely for this. Ancient browsers ignore the gradient declaration and use the solid colour, so the page still looks intentional. In practice every browser from the last decade supports linear-gradient, so the fallback is cheap insurance rather than a daily concern.
Can I put text over a gradient?
Yes — and you should. Text over gradients is where contrast dies quietly. Run your final pairing through the contrast checker on this site; if it fails, darken a stop or add a translucent overlay behind the text.
How many colour stops should I use?
Two or three. Two-stop gradients look clean and modern; three stops add richness. Beyond that, blends tend toward muddy — the eye reads many-stop gradients as noise rather than design. If you need complexity, layer simple gradients instead of complicating one.
Why does my gradient show stripes (banding)?
Banding — visible stripes instead of a smooth blend — appears when a gradient spans a long distance with too few colour steps for the display to render smoothly. Dithering or adding a whisper of noise breaks it up. For typical web backgrounds it is rarely noticeable; it bites hardest in large dark gradients.
Is anything I create uploaded?
No. Stops, angles and the resulting CSS are computed in your browser; nothing is uploaded or remembered. Experiment with client palettes freely.
Conclusion
Gradients are the easiest way to make a flat design feel alive: two or three colours, a direction, and arithmetic does the rest. Build it live, copy the CSS with its fallback, and enjoy backgrounds that stay crisp on every screen ever made.