Overview
Gradients are where flat design goes to get its depth back: a hero banner that warms from amber to ember, a button that feels lit rather than printed, a background that suggests dusk without a photograph. Writing the CSS for them by hand, though, means guessing at angles and stop positions, saving, refreshing, squinting, and repeating. This generator removes the refresh cycle — every slider you touch redraws the preview instantly, and the code beneath it is always the exact code for what you are looking at.
You control up to three colour stops, each with its own position along the blend, plus the angle of a linear gradient or the centred glow of a radial one. When the preview matches the picture in your head, one click copies production-ready CSS: a flat fallback colour followed by the gradient declaration, so even ancient browsers land on something sensible.
What is a CSS gradient?
A CSS gradient is an image the browser paints from instructions instead of loading from a file. You name the colours to travel between — the stops — and where along the journey each one should be fully itself. Between stops, the browser interpolates, mixing the colours in fine steps so the eye reads a continuous blend. A linear gradient travels in a straight line at an angle you choose; a radial gradient blooms outward from a centre point, like light from a lamp.
Because gradients are instructions rather than pixels, they stay perfectly sharp at every screen size, weigh almost nothing compared with a background photograph, and can be recoloured by editing two values. Their one honest limit: the blend happens in a straightforward colour space, so long journeys between distant hues can pass through a muddy middle — which is exactly what a third stop is for, placed deliberately in the muddy zone to steer the blend somewhere prettier.
Features
- Two or three stops: a classic pair by default, with an optional third stop for steering tricky blends.
- Position sliders: every stop slides from 0% to 100%, and stops are written into the CSS in order, wherever you leave them.
- Linear and radial: switch families with one click; the angle dial drives linear gradients through a full 360°.
- Live preview: a large panel redraws on every input — what you see is literally what the code produces.
- Clean output: the generated CSS includes a flat fallback colour line before the gradient, the way careful production code should.
- One-click copy: the Copy button lifts the exact text shown, ready for your stylesheet.
- Four honest presets: Sunset, Ocean, Forest and Berry as starting points you can immediately pull apart and make your own.
- Nothing uploaded: the preview and the code are built on your device.
Benefits
- No guess-refresh loop: design the gradient by looking at it, not by imagining it from numbers.
- Designer-developer peace: the person who tunes the blend hands over code, not a screenshot and a hope.
- Lightweight pages: a few dozen bytes of CSS replace a heavy background image.
- Resolution-proof: the same declaration looks sharp on a phone and a cinema display.
- Learning by touching: angles and stop positions stop being abstract the moment a slider answers back.
Who can use it
Front-end developers building headers, buttons and cards; designers who prototype in the browser and want real values instead of approximations; and anyone restyling a blog, a shop or a slide template who suspects a flat background is one blend away from looking finished. Students meeting CSS for the first time will find the instant feedback here kinder than any textbook diagram.
How to use
- Choose the colours for stop 1 and stop 2 with their colour wells.
- Slide each stop's position until the balance of the blend feels right.
- Tick "Use stop 3" if the middle of the blend needs steering, and set its colour and position.
- Pick Linear or Radial, and for linear, dial the angle you want.
- Prefer a head start? Click a preset, then adjust it until it is yours.
- Click Copy CSS and paste the result into your stylesheet or style block.
Frequently asked questions
What does the angle actually control?
For linear gradients, the direction of travel. At 0 degrees the blend runs from bottom to top, at 90 degrees from left to right, and at 135 degrees — a common favourite — it runs diagonally from the top-left toward the bottom-right. Radial gradients ignore the angle and bloom from the centre instead.
Why does my two-colour blend look muddy in the middle?
Distant hues pass through desaturated territory when mixed directly — orange to blue crosses a greyish zone. The classic fix is the third stop: place a colour in the middle that you actually want to visit, such as a warm pink between orange and purple, and the blend takes the scenic route.
Can stops be in any order?
You can slide stops past each other freely. This generator sorts them by position when writing the CSS, so the declaration stays valid and the preview always matches the output exactly.
Will this CSS work in every browser?
Linear and radial gradients in this standard syntax are supported by all modern browsers. The flat fallback colour line included in the output covers anything older: those browsers simply show the solid colour instead.
Can I make a gradient with hard stripes instead of a blend?
Yes, with a small edit to the copied code: set two neighbouring stops to the same position — for example red at 50% followed by blue at 50% — and the browser draws a crisp edge there instead of a transition.
Is anything I create stored or uploaded?
No. The preview is painted locally and the CSS is assembled in your browser's memory. Close the tab and the generator forgets everything, which is why the Copy button matters.
Conclusion
A good gradient is a small act of lighting design, and it should be made by eye, not by arithmetic at midnight. Tune the stops here until the preview glows the way you imagined, copy the code, and ship it — sharp at every size, and lighter than the photograph it replaces.