Gradient Generator

Build linear, radial and conic CSS gradients visually.

Runs entirely in your browser. Nothing you type or paste is sent anywhere.

Interpolate in OKLCH

Preview

CSS

background: linear-gradient(160deg, #67e8f9 0%, #0e7490 55%, #0b1f3a 100%); background: linear-gradient(160deg in oklch, #67e8f9 0%, #0e7490 55%, #0b1f3a 100%);

Settings

Angle160°

Colour stops

Drag a handle, or focus it and use the arrow keys (Shift for 10%). Delete removes it. Click the track to add a stop there.

Stop 1 colour picker
Opacity100%
Stop 2 colour picker
Opacity100%
Stop 3 colour picker
Opacity100%

More in Design & CSS

Color Lab

Convert HEX, RGB, HSL and OKLCH, check WCAG contrast and generate tint scales.

Shadow Generator

Layered CSS box shadows with a live preview.

Fluid Type & Units

Convert px, rem and em, and build clamp() values for fluid typography.