Fast, practical, browser-based developer tools
Create linear and radial CSS gradients, preview them live, and copy the generated CSS code instantly. This tool is useful for buttons, backgrounds, hero sections, cards, banners, overlays, and other interface elements that benefit from color transitions.
CSS gradients are widely used in modern web design because they add depth, contrast, mood, and visual polish without needing image files. With the right color combination and direction, gradients can help improve banners, cards, buttons, backgrounds, landing sections, and branded interface elements. This generator helps you experiment visually and export the final CSS immediately.
This CSS gradient generator is designed to work directly in the browser. That means your color choices, angle settings, and generated CSS can be handled locally on your device during the preview and export workflow.
For more details about site usage and analytics, read our Privacy Policy.
Choose the gradient type, set the direction or angle, pick your colors, and adjust the stop position. The preview updates instantly so you can fine-tune the design. When you like the result, copy the generated CSS and paste it into your stylesheet or component.
background: linear-gradient(90deg, #6ea8fe 0%, #8b5cf6 50%);
Put two vivid, near-opposite colours in a gradient — a saturated blue and a saturated yellow, say — and the middle comes out a lifeless grey-brown instead of a clean green. This is not a mistake in your stops. By default CSS mixes the two colours by interpolating their red, green, and blue channels in sRGB, and a straight-line path through the sRGB cube between two bright, opposing hues passes right through the desaturated centre. The result is the "grey dead zone."
The same physics is why sRGB gradients often look like they lose brightness in the middle: sRGB is not perceptually uniform, so equal numeric steps are not equal visual steps. Two-stop gradients between similar hues usually look fine; it is the wide hue jumps where the muddiness becomes obvious.
CSS Color 4 lets you name the colour space the gradient interpolates in, by adding
in <space> right after the direction and before the first stop:
linear-gradient(to right in oklch, blue, yellow), or with an angle,
linear-gradient(90deg in oklab, blue, yellow). oklab and
oklch are perceptually uniform, so the ramp keeps its brightness and saturation
across the middle instead of sagging into grey. oklch interpolates around the hue
wheel, which produces vivid rainbow-style transitions; oklab takes the shorter
straight path and is the safer default for two brand colours.
Browser support is solid: gradient interpolation colour spaces shipped in Chrome and Edge 111,
Safari 16.2, and Firefox 127, so every current mainline browser handles it. For hue-based
spaces you can also add a hue-direction keyword — in oklch longer hue forces the
interpolation the long way around the wheel, which is how you draw a full-spectrum sweep from a
single pair of stops. If you must support very old browsers, keep a plain sRGB
background declaration first and let the in oklch version override it.
transparent: the black-fringe trap
A classic bug: linear-gradient(to bottom, black, transparent) is intended to fade
an image out, but historically it faded through a dirty grey or dark band before disappearing.
The cause is that the keyword transparent is defined as transparent black
— rgba(0, 0, 0, 0). When a colour like red is interpolated toward transparent
black without accounting for alpha, the intermediate pixels pick up that hidden black and the
fade darkens.
Modern browsers now interpolate gradient stops using premultiplied alpha
(Safari fixed this in 15.4), which weights each colour by its opacity and largely removes the
fringe on current versions. But the bulletproof, always-correct fix is to fade to a fully
transparent version of the same colour rather than the bare keyword: write
linear-gradient(to bottom, red, rgba(255,0,0,0)), not
..., red, transparent. With modern syntax transparent can also be
spelled per-colour, e.g. fading to rgb(255 0 0 / 0). It costs nothing, reads
clearly, and never shows a grey ghost on any browser.
Colour stops do not have to blend. Place two stops at the same position and the colour
switches instantly with no transition — a hard stop. linear-gradient(90deg, #111 50%,
#eee 50%) is a two-tone split; repeat the pattern and you have stripes, and
repeating-linear-gradient tiles it for barber-pole and CSS-only pattern
backgrounds without an image.
Two direction details catch people out. In linear-gradient, 0deg
points up and angles increase clockwise, so 90deg goes to the right —
this differs from the maths convention where 0° points right. The keyword forms like
to right and to bottom left are usually clearer. For radial gradients,
the default shape is an ellipse that fits the box; add circle to force a round
spot, and a size keyword such as closest-side or farthest-corner to
control how far the colour reaches before the last stop holds.
By default CSS interpolates gradient colours in sRGB, and a straight path between two
bright, opposing hues passes through the desaturated centre. Interpolate in a perceptual
space instead — linear-gradient(in oklch, blue, yellow) — to keep the ramp
vivid across the middle.
Add in oklch (or in oklab) after the direction and before the
first stop: linear-gradient(90deg in oklch, #06f, #fc0). It works in Chrome
and Edge 111+, Safari 16.2+, and Firefox 127+. oklab takes the short path;
oklch travels the hue wheel for rainbow sweeps.
transparent show a grey or black edge?
transparent means rgba(0,0,0,0) — transparent black — so
the fade can pick up that black. Modern browsers premultiply alpha and mostly avoid it, but
the reliable fix is to fade to an alpha-0 version of the same colour, e.g.
rgba(255,0,0,0) instead of transparent.
Put two colour stops at the same position so the colour changes instantly — a hard stop.
linear-gradient(90deg, #111 50%, #eee 50%) splits the box in two, and
repeating-linear-gradient tiles the pattern into stripes.
0deg point?
In a linear gradient, 0deg points up and angles increase clockwise, so
90deg goes to the right — not the maths convention where 0° is rightward. The
keyword forms to right, to bottom, and similar are less
error-prone.
Linear gradients run colour along a straight axis; radial gradients spread it outward from
a point. A radial gradient defaults to an ellipse fitting the box — add circle
for a round spot and a size keyword like closest-side to control its reach.