What is an OKLab gradient?

A gradient whose colors are mixed in the OKLab color space, which is built around how we perceive color. The midpoint between two saturated colors stays saturated instead of dipping toward grey.

Do browsers support OKLab gradients?

Yes. Modern browsers accept linear-gradient(in oklab, ...). For older browsers, switch to baked output and the tool writes the interpolated stops out in full.

OKLab gradient generator

Gradients interpolated in OKLab keep their middle bright and even. Build one, then copy CSS, Tailwind or SVG.

linear gradient

Click the bar to add a stop

3 stops · eased

Code

background-image: linear-gradient(160deg, #2a2f6b 0%, #30316c 6.5%, #40376e 13%, #583f71 19.5%, #754675 26%, #924d77 32.5%, #ab5279 39%, #bc547a 45.5%, #c2557a 52%, #c4597a 58%, #ca6379 64%, #d37378 70%, #dd8575 76%, #e79671 82%, #efa56c 88%, #f5af68 94%, #f7b267 100%);

Easing is applied by baking 8 stops per segment, so this snippet needs no modern colour support at all.

Shape

Angle160°

Selected stop

1 of 3

Position0%

Opacity100%

Blending

Interpolation

Easing

Easing is why a fade to transparent stops looking like it ends early. Extra stops are computed along the curve.

Smoothness8 per segment

Grainoff

A little noise breaks up the banding a wide gradient shows on an 8-bit display.

Perceptually even. The best default for two colors far apart.

Presets

Questions

What is an OKLab gradient?: A gradient whose colors are mixed in the OKLab color space, which is built around how we perceive color. The midpoint between two saturated colors stays saturated instead of dipping toward grey.
Do browsers support OKLab gradients?: Yes. Modern browsers accept linear-gradient(in oklab, ...). For older browsers, switch to baked output and the tool writes the interpolated stops out in full.

Gradient Generator OKLCH gradient generator Grain gradient generator Radial gradient generator Conic gradient generator

Next steps

The tools that usually come after this one.

See every stage

AssetsOG Image GeneratorDesign the image every share shows.SystemMesh Gradient EditorMove the points. Watch it move.AssetsQR Code GeneratorStyled QR codes that still scan.

Pairs with

The catalog behind this tool: real, published entries with verified pricing and licensing, not a list of affiliate links.

Mesh Gradient EditorWhen two stops are not enough.Color PickerPull stops out of an image.Component librariesWhere these tokens live.