Why CSS gradients beat gradient images
A gradient rendered by the browser costs you nothing in network weight. There is no file to download, no extra HTTP request, and no cache to invalidate — the entire effect travels as a line of CSS inside a stylesheet you were already loading.
They are also resolution-independent. A gradient image has to be exported at multiple sizes and still risks visible banding or blurring on high-density displays; a CSS gradient is recalculated by the GPU at whatever size and pixel density the device happens to have, so it is always crisp. And because it is just CSS, you can change it in a second — swap a colour, adjust the angle, or drive the whole thing from custom properties for theming.
Linear vs radial: choosing the right type
Linear gradients flow along a straight line at whatever angle you specify. They are the workhorse: hero backgrounds, buttons, card overlays, and subtle top-to-bottom shading that adds depth without drawing attention. The angle is measured clockwise from pointing up, so 0deg runs bottom-to-top, 90deg runs left-to-right, and 135deg — the most common choice for a diagonal — runs from top-left to bottom-right.
Radial gradients radiate outward from a point. They are ideal for spotlight effects, soft glows behind a focal element, and giving a flat surface a subtle sense of light direction. Used large and low-contrast, a radial gradient reads as atmosphere rather than decoration.
Colour stops, and how to avoid muddy gradients
Each colour stop is a colour plus a position along the gradient. Two stops give you a simple blend; adding more lets you build complex, multi-hue transitions. The usual mistake is choosing two colours that sit opposite each other on the colour wheel — blending blue directly into orange passes through a grey, muddy middle, because the interpolation runs straight through the desaturated centre of the colour space.
The fix is to keep your stops closer together in hue, or to add an intermediate stop that steers the blend around the wheel rather than through it. Gradients between neighbouring hues — blue to purple, orange to pink, teal to green — look rich almost automatically. Our colour palette generator can produce harmonious analogous colours to use as stops.
Performance and accessibility notes
Static gradients are effectively free to render. Animated ones are not: transitioning the gradient definition itself forces the browser to repaint every frame. If you want movement, animate background-position across an oversized gradient instead — that is compositor-friendly, and it is exactly the technique used in the animation library on this site.
One accessibility caveat: text placed over a gradient has a contrast ratio that changes across the gradient. Check the text against the lightest and the darkest point it crosses, not just the average, using the contrast checker. If it fails at either end, add a semi-transparent scrim between the gradient and the text.