Gradient Maker

OKLCH perceptually-uniform gradients, no gray band, one-click CSS export.

Profile →Position100%

Angle90°Smooth interpolation (no dead zone)

48 classic community combinations - click to apply stops, type and angle in one go.

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

How the gradient tool works - build stops, tune, copy CSS.

2-6 stops with free positioning, OKLCH interpolation with no muddy band, plus 48 curated presets.

01
Build stops
2-6 stops: pick each color, drag positions, or paste HEX values.
02
Tune
Switch linear/radial/conic, drag the angle - or apply a curated preset in one click.
03
Copy
Smooth mode expands OKLCH midpoints automatically; CSS pastes ready-made and the link carries your gradient.

Four questions users actually ask.

Why do gradients go gray in the middle?: RGB interpolation cuts through low-saturation territory. OKLCH interpolation follows the hue, so the middle stays clean.
Can I add more stops?: Yes - 2 to 6 stops, each with its own color and position. Smooth mode inserts OKLCH midpoints between neighbors so the whole ramp stays clean.
Which browsers run the exported CSS?: All modern browsers. The tool emits plain RGB stops, so no conversion is needed even for older engines.
How do I share a gradient?: Every tweak syncs into the page URL (#g=...). Send the address-bar link to a teammate and it opens exactly as you tuned it.

Keep going from here and put the colors to work.

Any color into an 11-step design-system scale, perceptually even in OKLCH, WCAG contrast per step, export to Tailwind/CSS/SCSS/JSON.

Type any format (HEX / RGB / HSL / name) and convert to all color spaces in real time.

Spacebar to randomize, lock, drag to reorder, share by URL - everything a palette board should do.

WCAG 2.1 contrast validation between any foreground and background color.

How the gradient tool works - build stops, tune, copy CSS.

2-6 stops with free positioning, OKLCH interpolation with no muddy band, plus 48 curated presets.

2-6 stops: pick each color, drag positions, or paste HEX values.

Switch linear/radial/conic, drag the angle - or apply a curated preset in one click.

Smooth mode expands OKLCH midpoints automatically; CSS pastes ready-made and the link carries your gradient.

Gradient FAQ

Four questions users actually ask.

Why do gradients go gray in the middle?

RGB interpolation cuts through low-saturation territory. OKLCH interpolation follows the hue, so the middle stays clean.

Can I add more stops?

Yes - 2 to 6 stops, each with its own color and position. Smooth mode inserts OKLCH midpoints between neighbors so the whole ramp stays clean.

Which browsers run the exported CSS?

All modern browsers. The tool emits plain RGB stops, so no conversion is needed even for older engines.

How do I share a gradient?

Every tweak syncs into the page URL (#g=...). Send the address-bar link to a teammate and it opens exactly as you tuned it.