Web Design & Dev
CSS Gradient Generator
Design a smooth background gradient and copy the CSS.
Runs entirely in your browser — nothing you enter is sent or stored.
How it works
Interpolating in OKLCH avoids the muddy grey band that sRGB gradients get between opposite hues. The generated CSS includes a plain sRGB fallback line first, so older browsers still get a gradient.
Frequently asked questions
What is OKLCH?
A perceptual colour space supported by all current major browsers. Equal steps look equally different to the eye, so blends stay vivid.
Can I use this for text?
Yes, with background-clip: text and a transparent text colour — but check contrast at the lightest point.