Gradient Generator
Build linear, radial and conic CSS gradients, and compare sRGB with OKLab interpolation.
Part of design tools.
/* Fallback: the same gradient sampled for browsers without `in oklab` */ background: linear-gradient(90deg, #7c5cff 0%, #776af7 10%, #7277f0 20%, #6c82e8 30%, #658de0 40%, #5d97d7 50%, #54a0cf 60%, #4aa9c6 70%, #3db2bc 80%, #2abab2 90%, #00c2a8 100%); background: linear-gradient(in oklab 90deg, #7c5cff 0%, #00c2a8 100%);
The first declaration samples the same gradient into plain sRGB stops, so a browser that does not understand in oklab still gets the right colors.
Why most gradients go grey in the middle
By default CSS blends two colors channel by channel in sRGB, and sRGB is not perceptually uniform: the straight line between a saturated blue and a saturated yellow passes through a muddy grey nobody picked. It is the same reason a blue and a yellow paint mix badly on a screen — the maths is right, the space is wrong. Put the sRGB and the OKLab previews above side by side on any pair of saturated colors and the dip is impossible to miss.
What in oklab changes
Modern CSS lets a gradient declare the space it interpolates in: linear-gradient(in oklab 90deg, …). OKLab is built so that equal steps look like equal steps, so the midpoint between two colors is the one your eye expects, with its saturation intact. OKLCH goes further and travels around the hue wheel — pick the short path for a controlled blend between neighbouring hues, the long path when you actually want the full rainbow sweep between two close colors.
The fallback is sampled, not surrendered
A browser that does not understand in oklab drops the whole declaration, so the copied CSS ships a first declaration for it — and that one is not the dull sRGB blend. It is the OKLab gradient sampled into nine intermediate stops per segment, which the old browser then interpolates over very short distances where sRGB and OKLab barely differ. The cascade does the feature detection: no @supports, no duplicated class.
Stops, angles and the edge cases
Stops can be dragged on the bar, nudged by 1% with the arrow keys (10% with Shift), typed as an exact percentage, reordered or removed down to the two a gradient needs. Two stops sharing a position make a hard edge, which is a legitimate way to build stripes rather than a mistake, and stops entered out of order are sorted when the CSS is generated. Conic angles are folded back into 0–360°, and translucent stops keep their alpha in the output — the previews sit on a checkerboard so you can see it.
Picking the colors in the first place
A gradient is only as good as its endpoints. The palette generator builds an even tint scale from one brand color, which gives two steps that already belong together, and the color converter translates any stop into the notation your codebase uses. If the gradient ends up behind text, run the extremes through the contrast checker — a gradient background has to pass on its lightest and its darkest point.