Loading…
Loading…
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.
Also covers: Gradient generator · Linear gradient CSS · Background gradient maker
“in oklch” interpolation is supported by all current browsers (2023+); older ones fall back to the first colour.
.gradient { background: #ff6a2c; /* fallback for very old browsers */ background: linear-gradient(135deg in oklch, #ff6a2c 0%, #6d28d9 100%);}Linear, radial or conic, with angle or centre.
Up to eight, each with position and opacity.
Includes a solid-colour fallback.
It interpolates in a perceptual colour space, so blue-to-orange stays vivid instead of passing through grey. It's standard CSS (CSS Color 4) in all current browsers.
Yes — tick Repeating and place two stops at the same position for hard edges.
Check contrast against both ends of the gradient with the contrast checker; the text must pass on the worst part.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Layer soft, hard, inset and glowing box-shadows with a live preview, and copy the CSS.