Gradients

Gradients that don't go grey in the middle

Every gradient here is interpolated in OKLab or OKLCH — not sRGB, which is why most generators put a muddy band between two clean colours — and ships with a report: the worst-case contrast for white and black text along the line, banding risk at 1440px, and gamut warnings. 553 named gradients from two open corpora, tagged by measured hue; pair pages that show OKLab and OKLCH side by side; mesh, grainy, conic and Tailwind v4 generators; and the gradient each public brand's palette implies. Every one exports CSS, Tailwind, SVG, PNG and a DTCG token, and every one is a URL.

Open the gradient maker Derive from your brand →

Techniques

Mesh gradients

Stacked radials over a base colour, laid out by a seeded Poisson-disc sampler — reproducible, exportable as CSS, SVG and PNG.

Grainy gradients

A stitched noise tile blended over the gradient — 1–4% opacity removes banding, 8–15% is the look.

Conic gradients

Angles instead of positions; closed at 360° so there is never a seam at 12 o'clock.

Tailwind gradients

v4 syntax (bg-linear-*, /oklch modifiers, from-10% positions), the v3 → v4 rename, and the classes for any gradient you build.

By colour

553 named gradients · uiGradients + WebGradients, both MIT

By mood

Tagged by measuring the stops in OKLCH — a "sunset" here is orange or red running into a second warm hue with real chroma, never one red end to end, and never a name someone typed.

Warm121 Cool240 Vivid154 Muted146 Light150 Dark29 Pastel60 Neutral21 Monochrome107 Jewel Tones36 Sunset62 Ocean113 Forest8 Neon24 Calm103

Colour to colour

generated between named colours that go together

Gold to Cornflower Blue

white 1.40 failsblack 7.06 AA

Gold to Tomato

white 1.40 failsblack 7.13 AA

Gold to Deep Sky Blue

white 1.40 failsblack 9.89 AA

Sage Green to Lilac

white 1.29 failsblack 4.39 AA large

Sage Green to Copper

white 2.36 failsblack 5.54 AA

Navy Blue to Sienna

white 5.62 AAblack 1.31 fails

Beige to Sky Blue

white 1.11 failsblack 12.06 AA

Beige to Lilac

white 1.11 failsblack 9.46 AA

150 pairs at /gradients/<a>-to-<b> — every one two named colours the wheel or a real palette already puts together, never an arbitrary combination. Any two colours at all is what the maker is for.

Brand gradients

derived from published colour tokens · nominative use

1password gradient

#000000#85beff

3M gradient

#ff9e8e#ff0000#a90000

#ffbcb8#ff5a5f#be0c2a

#534953#241c24#020002

American Eagle gradient

#535659#24272a#020304

mcpConnect your agent to the gradient engine

live endpoint

Point any MCP client at the shared gradients endpoint and your agent gets the same engine as this page — make_gradient returns CSS with the interpolation space, Tailwind v4, SVG, a PNG URL, a DTCG token and the contrast report in one call; brand_gradients derives the whole contact sheet from a brand or a palette. Read-only, no key. Every gradient is a /gradients/new/… link: open it, refine, paste it back.

endpointhttps://mcp.brandsweets.com/gradients/mcp

claude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp

try this prompt

›derive the brand gradient, a hero and a button from #635bff and #00d4ff, and tell me which ink passes AA at the worst point

Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.

The 553 named gradients come from uiGradients and WebGradients, both MIT. Both notices are reproduced verbatim on the licences page.