CSS Gradient Generator
Compose a linear gradient and copy the CSS.
Why gradients go grey in the middle
The classic failure is a blue-to-yellow gradient that passes through a muddy grey. It happens because browsers interpolate in sRGB by default, and the straight line between two saturated colours in that space passes close to the desaturated centre. The effect is worst between complementary hues and between colours far apart on the wheel.
Two fixes work. Add one or two intermediate stops at hues that keep the path saturated, which works everywhere. Or interpolate in a perceptual space using modern CSS syntax — linear-gradient(in oklch, ...) — which follows a path that stays vivid, at the cost of needing a fallback for older browsers.
Banding is a bit-depth problem
Visible stripes across a large, subtle gradient come from 8-bit-per-channel colour: there simply are not enough distinct values to render a smooth transition across 1500 pixels when the endpoints are close together. Larger areas and lower-contrast gradients band worse. Adding a very subtle noise texture over the gradient breaks up the boundaries and is the standard fix; a slight increase in the contrast between endpoints also helps.
Gradients are a rendering cost and an accessibility surface
A gradient repainted on every scroll or animated frame is more expensive than a flat fill, and gradients on text via background-clip frequently produce contrast that fails at one end of the run even when it passes at the other. Any text placed over a gradient needs its contrast checked at both extremes, not just where it happens to sit in your mockup. For decorative background gradients, keeping the luminance range narrow means overlaid text behaves consistently across the whole surface.
How to use it
- Pick your two colours and the angle.
- Check the midpoint — if it looks muddy, add an intermediate stop.
- Copy the generated CSS and paste it into your stylesheet.
- Verify contrast for any text placed over the gradient at both ends of the range.
Questions worth asking
Why does my gradient look muddy in the middle?
Browsers interpolate in sRGB by default, and the straight path between two saturated colours passes through a desaturated centre. Add an intermediate stop, or use perceptual interpolation with syntax such as linear-gradient(in oklch, ...).
How do I fix visible banding?
Banding comes from 8-bit colour depth across a large area. Overlay a subtle noise texture to break up the boundaries, reduce the gradient's physical size, or increase the contrast between the endpoints.
What does the angle value mean?
In CSS, 0deg points to the top and angles increase clockwise, so 90deg runs left to right and 180deg runs top to bottom. This differs from the mathematical convention, which trips up most people once.
Can I put text on a gradient?
Yes, but check contrast at both ends of the gradient rather than only where the text sits in your design. A pairing that passes over the light end can fail badly over the dark end.
Disclaimer: Generated colours, scales, and CSS are a starting point for your own design system. Always verify contrast, rendering, and behaviour on real devices — passing an automated check is not the same as meeting your accessibility obligations.