Angles are measured clockwise from the top
In CSS, 0deg points up and angles increase clockwise, so 90deg runs left to right and 180deg runs top to bottom. The common 135deg is a diagonal from the top left corner toward the bottom right.
Gradients interpolate in sRGB by default, which can produce a dull grey midpoint between two saturated colors. Adding a middle stop with a slightly more saturated color fixes the muddy band.
Keeping text readable on a gradient
A gradient behind text needs the darker end to cover the text area, not just the container. Adding a second gradient layer in the same CSS declaration as a scrim gives a stable contrast ratio regardless of which end of the gradient sits behind the words.
Two stops in the same hue family also age better than two unrelated hues, because the result reads as one surface rather than two blocks meeting in the middle.
Frequently asked questions
Can I animate a CSS gradient?
Background gradients are not interpolable in most browsers, so animating them snaps. Animate the position of an oversized gradient with background-position instead, which is smooth and cheap.
Why does my gradient look banded?
Eight-bit color depth gives roughly 256 steps per channel, and a long gentle gradient can exhaust them. Shortening the gradient or adding slight noise removes the visible bands.
More free tools
Related guides
Related searches
css gradient generatorlinear-gradientcss background gradienttailwind gradientgradient maker