How to avoid gradient banding

Banding is when a smooth gradient shows visible stripes instead of a seamless fade, usually most obvious on a large, low-contrast gradient like a dark background or a subtle sky. It is a common problem and almost always fixable without redesigning the gradient itself. Here is why it happens and what actually fixes it.

Why banding happens

Screens display color in discrete steps, typically 256 levels per channel at standard 8-bit color. When a gradient spans a large area but only a small range of brightness or hue, say a background that goes from a very dark blue to a slightly less dark blue, the available color steps get spread thin. Each visible band is really just one of those discrete steps, made obvious because there are not enough of them to hide the transition.

It gets worse under two common conditions: when the gradient covers a large physical area (a full-page background versus a small button), and when it is exported to a compressed image format that reduces color precision further, like a low quality JPEG.

Fixes that actually work

Widen the range. The simplest fix is often to increase the contrast between your stops, either in lightness or in hue. A gradient that moves further across the color space has more room to spread its steps, so bands become imperceptible. If your design calls for two very similar colors, consider whether a slightly wider range would still read as intentional.

Use more stops. Two-stop gradients over a large area are the most band-prone. Adding one or two intermediate stops, especially near where a shift in hue happens, gives the renderer more information to interpolate smoothly rather than a single flat ramp.

Interpolate in a better color space. Naive RGB interpolation between two colors can pass through a duller, greyer area in the middle, which paradoxically makes banding more visible because the midpoint has less contrast to hide the steps in. Interpolating in a perceptually uniform space keeps brightness and saturation more consistent across the ramp, which reduces the visual stepping even before any dithering is applied.

Add a little noise. A very subtle noise or grain texture overlaid on a gradient breaks up the flat bands by adding high-frequency variation that the eye reads as smooth, rather than the low-frequency stepping of raw banding. This is a standard trick in both print and digital design for exactly this problem.

Export at higher quality. If banding only shows up after you download an image, check your export format and quality setting. A PNG preserves exact colors; a heavily compressed JPEG can introduce or worsen banding that was not visible in the original render.

Try it yourself

The easiest way to catch banding before it ships is to build the gradient at full size and check it on a real screen rather than a small thumbnail. Add stops, adjust your range, and preview instantly in the gradient generator, then copy the CSS or export a clean PNG once it looks right.