CSS Gradient Generator
Build linear, radial and conic CSS gradients with any number of colour stops, angle control and interpolation in OKLab or OKLCH for smoother colours.
Free · No sign-up · Your inputs stay in your browser
Input
Generate a CSS gradient
Output
CSS
160 characters
Mixing in sRGB, the historical default, runs complementary colours through a muddy grey; OKLab and OKLCH keep the middle bright. The 'in oklab' syntax is CSS Color 4, supported by current Chrome, Safari and Firefox; the first line is the fallback for anything older, which simply ignores the second.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
The grey middle
Gradients between complementary colours, such as blue to orange, pass through a muddy grey when interpolated in sRGB, the historical default. OKLab interpolates in a perceptually uniform space and keeps the midpoint bright; OKLCH also keeps saturation by interpolating hue. The in oklab syntax comes from CSS Color Level 4 and is supported by current Chrome, Safari and Firefox.
Gradients and banding
Long gradients between close colours can show visible bands on 8-bit displays. A slightly wider colour range, or a subtle noise texture, hides it.