STYLE UTILITIES
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 CANVAS
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.
01
02
03
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.
Private by design · Input is processed in this browser. Only valid hex colours are used in this focused gradient builder.
Need the complete version? Open all tool options