gradients.fyi

An OKLCH-native mesh gradient generator. Place colour anchors on a canvas, drag them around, export production-ready PNG, CSS, or SVG.

> OKLCH gradients

OKLCH is a perceptually uniform colour space: equal numerical steps read as equal visual steps to the eye. Interpolating between colours in OKLCH avoids the muddy mid-tones and hue shifts you get from blending in sRGB or HSL.

> Mesh gradients

A mesh gradient blends between several anchored colour points across a 2D surface, not just along a line or radius. You get organic, painterly transitions that feel closer to natural light than the stripes of a linear gradient.