CSS Gradient Generator
Build a gradient visually, tune the stops, and copy production-ready CSS. Everything runs in your browser.
Build a gradient visually and copy production-ready CSS. Linear, radial and conic, with as many stops as you need.
The workhorse
Runs along an angle. Backgrounds, buttons and overlays.
From a point
Spreads outward from a centre, which suits glows and soft vignettes.
Around a centre
Sweeps around a point. For pie charts, colour wheels and metallic sheens.
The muddy middle
sRGB interpolation passes through a dead grey for complementary colours. A third stop holds saturation.
Conic gradients need a fallback in older browsers. Support is broad now, but ship a flat colour or a linear gradient underneath if you target older versions.
The three gradient types, and when each one is right
- Linear — colour travels along a straight axis. The default for backgrounds, buttons and cards.
180degruns top to bottom;to rightequals90deg. - Radial — colour travels out from a point, for glows and spotlights.
circle at 30% 20%puts the source off-centre, which usually looks better. - Conic — colour sweeps around a point. Pie charts, loading spinners and hue wheels.
Why gradients band, and how to stop it
A smooth gradient across a wide area needs more intermediate colours than 8-bit sRGB can express, so the browser rounds and the rounding shows as stripes. It is worst on large, low-contrast, dark gradients.
Three fixes: keep the distance between stops shorter, avoid gradients between two colours close in lightness, and add a faint grain overlay at two or three per cent opacity.
Interpolating in the right colour space
CSS blends in sRGB by default, routing some pairs through a desaturated middle — blue to yellow comes out dull grey. Modern browsers let you choose: linear-gradient(in oklch, blue, yellow) keeps the midpoint saturated, because OKLCH is built around perceived lightness.
It degrades safely. A browser that does not understand the syntax ignores the declaration, so keep an ordinary sRGB gradient on the line before it.
Gradients and readability
Text on a gradient has no single background to test, and a pair that passes at one end routinely fails at the other. Check the lightest and darkest points with the contrast checker, and add a scrim behind the text if either fails.
Frequently asked questions
Is this free?
Yes — no account, no limit, no watermark on the output.
Does anything get uploaded?
No. The gradient and the CSS are generated entirely in your browser.
Will the CSS work everywhere?
Linear and radial gradients work in every current browser. Conic is widely supported but worth a fallback.
Why does my gradient look grey in the middle?
sRGB interpolation passes through the midpoint of the two RGB values, which is desaturated for complementary colours. Add a stop that holds saturation.
Can I match a gradient to a palette?
Yes — build it in the colour palette generator first, then paste those hex values in as stops.
How do I make a gradient background in CSS?
Set background-image to a gradient function, for example background-image: linear-gradient(180deg, #1e293b, #0f172a);. Gradients are images, so they never go on background-color.
Can I use a gradient on text?
Yes — apply it as the background, then use background-clip: text and color: transparent. Keep it for short headings, because gradient body text cannot be contrast-checked reliably.
How many colour stops should a gradient have?
Two or three. Every extra stop is another place the eye can catch a transition.
Why does my gradient look striped?
That is banding. Shorten the distance, widen the contrast between stops, or overlay a faint grain.
Related tools
Generate the colours with the palette generator, check any text sitting on the gradient with the contrast checker, or see all the utilities we host. For full design software, browse the directory of 621 tools.