Colors
CSS Gradient Generator
Design linear and radial CSS gradients with multiple stops and full angle control — previewed live, exported as clean CSS.
The preview renders the exact CSS shown — what you see is what you paste. Works in every modern browser.
Getting Smooth Instead of Muddy
Two-stop gradients between complementary colors pass through a gray middle that looks dirty; adding a third stop near the midpoint in a lighter hue keeps the blend alive. Gradients between colors of similar lightness look smoothest — a dark-to-light blend of the same hue almost never bands.
A Note on Color Spaces
This generator interpolates in sRGB, the space CSS uses by default. It is predictable and universal; wide-gamut spaces (display-p3, oklch) produce perceptually smoother blends in modern browsers but are a deliberate choice, not a default. Test contrast for any text that sits on the gradient, at both ends.
How the Color Math Works
- Choose linear or radial mode and set the angle or shape.
- Add, remove, and reorder color stops; drag stop positions or type exact percentages.
- The preview updates live and mirrors the final CSS exactly.
- Copy the one-line background-image declaration for your stylesheet.
Worked Example
Common Questions
Are the gradients supported in all browsers?
Yes. Unprefixed linear-gradient and radial-gradient work in every browser from roughly 2013 onward.
Can I add more than two colors?
Yes — add as many stops as needed and position each one precisely; hard-stop effects (0% gaps) are supported too.
Related Colors
Color Palette Generator
Turn one base color into a full design-ready palette: tints, shades, and harmonic variations, each with HEX/RGB/HSL values.
Color Mixer & Blender
Blend any two colors at any ratio with RGB and HSL mixing modes, showing the full gradient of intermediate steps.
Color Converter
Inspect and convert colors across all major web and print formats (HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK) in real time with interactive preview.