CSS Gradient Generator
Create stunning gradient backgrounds with ease. Adjust the stops and angle, preview live, and copy ready-to-use CSS for linear, radial and conic gradients.
background: linear-gradient(135deg, #e6f3c0, #f197d5, #deb84c, #a8243d);The grey band problem, and how to fix it
A gradient from a saturated blue to a saturated yellow will develop a dull grey band through its middle. This happens because the browser interpolates linearly through sRGB, and the straight line between two distant hues in that space passes near the achromatic axis.
There are two fixes. The straightforward one is to add an intermediate stop at the hue you actually want the transition to pass through, which gives you complete control at the cost of a longer declaration. The modern one is to ask the browser to interpolate in a perceptual space with `linear-gradient(in oklab, ...)`, which keeps chroma high across the whole transition.
Gradients that do not look dated
The gradients that age badly are the ones that span a large hue range at full saturation. Those read immediately as a specific moment in design history. The ones that last stay within about 60 degrees of hue and vary lightness instead, which produces depth rather than decoration.
It also helps to keep gradients behind content rather than on it. A subtle two-stop gradient on a large surface adds dimension without competing with type; the same gradient on a button makes the label harder to read and complicates your contrast testing.
CSS Gradient Generator FAQ
How do I create a CSS gradient?
Pick your stops above, choose linear, radial or conic, set the angle, and copy the generated CSS. Paste it into any background property and it will work in every current browser without a prefix.
Why does my gradient look grey in the middle?
Browsers interpolate gradients in sRGB by default, and the midpoint between two distant hues passes through a desaturated region. Adding a third stop at the hue you want, or interpolating in Oklab with `in oklab`, avoids the grey band.
What is the difference between linear, radial and conic?
Linear gradients transition along a straight axis you set with an angle. Radial gradients spread outward from a point, which suits spotlights and soft backgrounds. Conic gradients sweep around a centre point and are what you use for pie charts and colour wheels.
Can I use gradients as text color?
Yes, by setting the gradient as the background and applying background-clip: text with a transparent text color. Always keep a solid fallback color so the text remains readable if the clip is unsupported.