Gradient Library

Eight thousand ramps, and which of them band.

Every gradient here carries its stops, the space it was interpolated in, and a measured verdict on whether it steps — the one thing a thumbnail cannot tell you. Paste your own below and it gets the same measurement.

Collection 8,192 Smooth 77% Measured in OKLab Read the API guide →

Will your gradient band?

Give it your stops. It samples the ramp the way a browser paints it, measures the perceptual distance between neighbouring samples in OKLab, and tells you whether any transition is large enough to read as a step — and where.

Click a swatch to pick, or type any CSS colour — hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() or a name.

Browse the collection

Filter by scheme, complexity, interpolation space or easing — or by the banding verdict, which is what narrows 8,192 down to the ones you can actually use at size.

Filter inside results

Method

Scheme

Complexity

Stops

Interpolation

Easing

Score

Banding

Sort by

Loading gradient library...

—

🔍

No gradient selected

Click any gradient card in the Library tab to inspect its color stops, interpolation, easing, banding, score, contrast samples and export-ready CSS.