Overview
Some of the most striking interfaces on the web are painted with a single line of CSS. A linear gradient turns flat colour into atmosphere: hero sections gain depth, buttons gain tactility, overlays gain mood — all computed by the browser at render time, infinitely sharp on any display, weighing essentially nothing.
This generator makes that line of CSS without requiring you to memorise the syntax. Choose two or three colour stops with individual pickers, set the blend angle from subtle to dramatic, and watch a live preview respond to every drag. The output uses standard linear-gradient syntax every modern browser understands, with each stop's HEX shown for reuse elsewhere.
What is a CSS gradient doing, exactly?
A linear gradient is a smooth transition between colours, computed pixel by pixel along an imaginary line. You choose the angle of that line and the colours at each stop; the browser fills every point between with the proportional mix. At one end you see the first colour, at the other the last, and the journey between is pure arithmetic — no image involved.
That arithmetic is why gradients punch above their weight: they scale to any screen, animate smoothly, and cost a fraction of a kilobyte. The 'comeback' of gradients in modern design is really a rediscovery — used with restraint, a blend adds dimension that flat colour cannot, and used boldly it becomes the brand itself.
Features
- Two or three colour stops, each with its own picker, blended smoothly.
- Live preview that updates the instant you drag any control.
- Angle control for the blend direction, from subtle to dramatic.
- Copy-ready CSS in standard linear-gradient syntax.
- Flat fallback colour declared first, for pre-gradient browsers.
- HEX per stop shown plainly, easy to reuse anywhere.
- Fully local — rendering happens in your browser.
Benefits
- Richness without weight: atmosphere at a fraction of a kilobyte.
- No syntax memorisation — build visually, copy the code.
- Sharp on every display, from phones to 4K monitors.
- Safe everywhere: the fallback keeps old browsers intentional.
Who can use it
Developers who know what they want but not the syntax, designers prototyping hero sections, bloggers dressing up call-to-action buttons, students learning CSS backgrounds by playing, and anyone whose site is currently fifty shades of flat. If you can drag a slider, you can ship a gradient.
How to use
- Pick your first two stop colours (add a third if you like).
- Drag the angle control until the blend direction feels right.
- Watch the live preview and fine-tune the stops.
- Copy the generated CSS, fallback colour included.
- Paste it as the background of any element and admire.
Frequently asked questions
What's a good angle for a hero background?
Diagonal blends (around 135 degrees) feel dynamic and modern; vertical blends feel calm and natural, like a sky. There is no correct answer — drag slowly through the range and stop where the mood matches the content. Subtle is usually safer than dramatic for text-heavy sections.
Why include a fallback colour at all?
Because a tiny fraction of browsers — and some email clients — predate gradient support. Declaring a flat colour first means they show something deliberate instead of nothing. It costs one line and buys total graceful degradation.
My gradient looks banded — visible stripes instead of smooth. Why?
Colour banding appears in subtle blends on some displays, especially dark ones, because the screen cannot show enough intermediate shades. Adding a middle stop, or choosing stops further apart in lightness, usually smooths it. Dithering fixes exist but are beyond a one-line gradient.
Two stops or three?
Two stops give clean, classic blends — most professional gradients stop there. A third stop adds complexity: a glow in the middle, a richer journey, or a brand tri-colour. Start with two; add the third only if the blend feels like it is missing something.
Can I animate a gradient?
Background positions and angles animate nicely with CSS transitions and keyframes — a slowly drifting gradient makes a lovely ambient hero. Animating the stop colours themselves is trickier; most designers animate position, not hue.
Conclusion
One line of CSS, infinite resolution, zero requests. Build it visually, copy it once, and let the browser do the painting — with a fallback for the browsers that can't.