CSS Gradient Generator
Design linear and radial CSS gradients visually and copy the ready-to-use code, with colour-stop control and the interpolation trick that avoids grey midpoints.
The muddy middle is real, and measurable
A plain CSS gradient interpolates the stored sRGB numbers, and those are gamma-encoded — so the arithmetic is not arithmetic on light. The result is not a subtle shift: on several ordinary colour pairs, the middle of the gradient is darker than both colours you started with.
Interpolating the numbers — note the dip
Interpolating the light
| Gradient | Naive midpoint | In light | Darker than both ends? |
|---|---|---|---|
| red to blue | #800080 | #bc00bc | yes |
| blue to yellow | #808080 | #bcbcbc | yes |
| magenta to cyan | #8080ff | #bcbcff | yes |
| black to white | #808080 | #bcbcbc | no |
A band dimmer than both endpoints is exactly what the eye reads as dirty, and it is why a red-to-blue gradient grows a grey-purple stripe neither colour accounts for. Black to white is the exception in the table, and only because one end is already zero light — there is nothing for the middle to fall below.
Ask the browser to interpolate the light instead
CSS can now name the space the interpolation happens in, which fixes this without a hand-placed middle stop:
linear-gradient(in oklab, red, blue)
linear-gradient(in oklch, red, blue)
linear-gradient(in srgb-linear, red, blue)Measured across the whole gradient, the light-correct version is never darker at any point and recovers up to 29 percentage points of light at the worst spot. The old workaround — dropping in a manually brightened stop at 50% — was designers correcting this by eye for years without a name for it.
How to use
- Choose linear, radial or conic.
- Add and position your colour stops.
- Set the angle or centre point.
- Copy the generated CSS.
Frequently asked questions
Why does my gradient have a dull grey middle?
Because interpolating in the default colour space passes through desaturated territory between two vivid hues — a blue-to-yellow gradient goes through grey rather than green. Specifying a different interpolation space, such as OKLCH, keeps the midpoint saturated and looks far better.
What is the difference between linear, radial and conic?
The direction the colours travel. Linear runs along a straight line at an angle you choose, radial spreads outward from a point, and conic sweeps around a centre like a clock face. Conic is what produces pie charts and colour wheels in pure CSS.
How do I make a hard-edged stripe rather than a fade?
Put two colour stops at the same position. The transition then has nowhere to happen and becomes a hard line, which is how repeating gradients produce stripes, checks and other patterns without an image.
Can a gradient be animated?
Not directly by interpolating a background image, which browsers do not animate. The usual approaches are to animate the background position of an oversized gradient, or to use a CSS custom property registered with a type so the browser knows how to interpolate it.
Do gradients hurt performance?
Rarely, and they are generally cheaper than the image they replace — no extra request, no file to download, and they scale to any size without blurring. Very complex layered gradients on large areas can cost paint time, but a simple one is essentially free.
How do I keep text readable over a gradient?
By checking contrast at the worst point rather than the average, since the background colour varies across the element. A semi-transparent overlay behind the text, or restricting text to the region where the gradient is darkest, are the usual solutions.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.