Gradient Maker
Blend colours in OKLCH for gradients without grey, muddy middles, and export them as CSS, SVG or PNG.
Click the strip to add a colour; drag the markers to move them.
background-image: linear-gradient(90deg, #2563eb 0%, #6f5cec 12.5%, #9d57e0 25%, #c255c8 37.5%, #df57a9 50%, #f35f85 62.5%, #fe6f60 75%, #fe8539 87.5%, #f59e0b 100%);
background-image: linear-gradient(90deg in oklch, #2563eb 0%, #f59e0b 100%);
The first line is for browsers from before 2023, which blend in sRGB: extra stops trace the same curve. Newer browsers use the second line.
About this tool
Make linear, radial and conic gradients that blend in OKLCH, the way modern CSS can. Blending in a perceptual colour space keeps the middle of a gradient as vivid as its ends, where the old sRGB blend passes through grey: compare the two strips to see the difference.
Add up to ten colours by clicking the strip, drag them into place or move them with the arrow keys, and choose how hues travel round the colour wheel. See-through colours blend the way browsers draw them, so fading to transparent never turns grey.
Copy the CSS, which includes a fallback with extra stops for browsers from before 2023, or download the gradient as SVG or as a PNG, WebP, AVIF or JPEG at any size up to 8192 pixels, drawn pixel by pixel with a little noise to hide banding.
Which browsers support "in oklch"?
Chrome and Edge 111, Safari 16.2 and Firefox 127 onwards. Older browsers ignore that line and use the fallback above it, which traces the same colours with extra stops.
Why does the SVG have so many stops?
SVG gradients always blend in sRGB. To reproduce the OKLCH blend, Interformat adds intermediate stops along the way. SVG has no conic gradients, so those download as images only.