CSS gradient generator
Build linear, radial and conic gradients with as many color stops as you like. OKLCH blending keeps transitions vivid instead of gray in the middle, and the CSS includes a pre-blended fallback for older browsers. Copy the code or download a 1920×1080 PNG.
How to use the gradient maker
- Choose linear, radial or conic, and set the angle.
- Edit each stop's color and position; add stops with “+ Add stop”.
- Keep “Smooth OKLCH blending” on for vivid transitions.
- Copy the CSS, or download the gradient as a PNG.
Why do some gradients look muddy?
Browsers traditionally blend gradients in sRGB, where the midpoint between two saturated complementary colors is a dull gray. Interpolating in OKLCH keeps lightness and chroma consistent, so a blue-to-yellow gradient passes through vivid colors instead of gray. Modern CSS supports this with linear-gradient(in oklch, …).
Browser support
The generated CSS declares a fallback first (with extra pre-blended stops computed in OKLab), then the in oklch version. Browsers that understand OKLCH interpolation use the second line; others use the first.
Frequently asked questions
How do I make a gradient in CSS?
Use background: linear-gradient(90deg, #5b4bff, #ff5c8a); — or design it visually here and copy the generated code.
What is a conic gradient?
A conic gradient rotates colors around a center point, like a color wheel or pie chart: conic-gradient(from 0deg, red, blue).
Can I download the gradient as an image?
Yes, click “Download PNG” for a 1920×1080 image.