CSS Gradient Generator

Build linear, radial, and conic gradients with movable colour stops. Compare sRGB with Oklab, spot muddy midpoints, and copy CSS or a Tailwind value.

STYLE UTILITIES · PRIVATE BROWSER WORKSPACE

Build a gradient. Shape the light.

Build linear, radial, and conic gradients with movable colour stops. Compare sRGB with Oklab, spot muddy midpoints, and copy CSS or a Tailwind value.

LIVE CANVASANGLE 135°

STARTCOLOUR TRAVELEND

background: #2563eb;background: linear-gradient(135deg, #2563eb 0%, #9333ea 50%, #f43f5e 100%);/* Optional: perceptual interpolation keeps colour through the middle in modern browsers. */background: linear-gradient(in oklab 135deg, #2563eb 0%, #9333ea 50%, #f43f5e 100%);

COLOUR STOP RAIL

Place each colour.

010%

0250%

03100%

3 colour stops · CSS sorts stops by position

SAME END COLOURS · DIFFERENT INTERPOLATION

Keep chroma through the middle.

Modern browsers can interpolate in Oklab for a more perceptually even transition. The copied CSS keeps a plain fallback first.

sRGBDefault interpolation

OklabPerceptual interpolation

Private by design · Input is processed in this browser. Only valid hex colours are used in this focused gradient builder.

Need a feature from the original version? Open the current ECECH tool

How this app works

Build linear, radial, and conic gradients with movable colour stops. Compare sRGB with Oklab, spot muddy midpoints, and copy CSS or a Tailwind value.