CSS Linear Gradient Generator
Note: Adding in oklab after the direction is the single biggest improvement available to a gradient — it removes the muddy grey midpoint that sRGB interpolation produces between two saturated colours.
The first is the grey dead zone. A gradient from blue to yellow passes through a muddy grey in the middle, because interpolating in sRGB takes a straight line through a colour space that is not perceptually shaped — and that line goes through the desaturated centre. Adding `in oklab` to the gradient makes the browser interpolate in a perceptual space instead, and the midpoint stays saturated. It is a one-word change and it is the single biggest improvement available to a gradient.
The second is banding, the visible stripes across a large, subtle gradient. It happens because 8-bit colour has only 256 steps per channel, and a gradient spread across a whole hero section may need more gradations than that between two similar colours. The fix is not more stops — it is a very slight noise texture over the top, which breaks the boundaries up so the eye stops resolving them. The generator can emit that overlay.
The angle is worth being precise about. In CSS, 0deg points up and angles run clockwise, which is the opposite convention from most maths and from SVG. 90deg is left to right, 180deg is top to bottom. The keyword form — `to right` — is clearer for the simple cases and worth preferring for that reason.
Hard stops, where two positions coincide, produce stripes rather than blends. That is how you build a striped background or a two-tone split with a single declaration and no extra elements.
Frequently Asked Questions
Why does my gradient go grey in the middle?
Because sRGB interpolation takes a straight line through a colour space where that line passes near the desaturated centre. Add `in oklab` after the direction — linear-gradient(to right in oklab, blue, yellow) — and the browser interpolates perceptually, keeping the midpoint saturated.
How do I get rid of the visible bands?
Banding comes from 8-bit colour having only 256 steps per channel, so a large subtle gradient runs out of gradations. Adding more colour stops does not help. A faint noise texture layered over the gradient breaks the boundaries so the eye no longer resolves them — the generator can output it.
Which way does 0deg point?
Up, with angles increasing clockwise — the opposite of the usual mathematical convention and of SVG. So 90deg runs left to right and 180deg runs top to bottom. For simple directions the keyword form, to right, avoids the question entirely.
How do I make hard stripes instead of a blend?
Give two adjacent stops the same position. red 0 50%, blue 50% 100% produces a sharp split with no transition at all, which is how striped and split backgrounds are built without any extra elements.
Can I animate a gradient?
Not the stops themselves — background-image is not an animatable property, so a transition between two gradients jumps. The usual approaches are to animate background-position on an oversized gradient, or to cross-fade two stacked elements with opacity.
