Why your gradient has stripes, and how to fix banding

Gradient banding is when a smooth gradient shows visible stripes or steps instead of a continuous blend. It happens because digital images can only store a limited number of shades per colour, usually 256 per channel, and when a gradient changes slowly across a wide area, each shade has to cover a band of pixels. Your eye is very good at spotting edges, so it picks out those bands. The fix is usually to add a fine grain, export with less compression, or give the blend more colour to work with.

What causes gradient banding

Most images use 8 bits per channel: 256 possible values each for red, green and blue. That sounds like plenty, and for a strong gradient it is. The trouble starts when the colours at each end are close together.

Take a grey gradient from #202020 to #303030 across a 1920 pixel wide screen. Each channel only moves from 32 to 48, which is 16 steps. So the gradient contains 16 distinct shades, each about 120 pixels wide. No software can make it smoother, because there are no shades in between to use.

Where banding shows up most

This is why dark gradient backgrounds and aurora gradients need the most care. Their beauty depends on long, gentle ramps through dark tones, which is exactly the recipe for banding.

How to fix gradient banding

1. 1

   Add grain or dither

   A fine layer of random noise scatters pixels between neighbouring shades, so the eye can no longer find the edges. It is the most reliable fix, and it also makes the surface look richer. See grainy gradients.

2. 2

   Give the blend more range

   Wider differences in lightness or hue between the end colours mean more available steps, and narrower bands. A gradient that also shifts hue a little uses more combinations of red, green and blue than a pure lightness ramp.

3. 3

   Work in 16 bits where you can

   Image editors that support 16 bits per channel keep far more levels while you work. Convert to 8 bits only at export, with dithering turned on.

4. 4

   Export at high quality

   Use PNG for flat graphics, or JPEG at a high quality setting for photographic images. Avoid GIF and PNG-8, which keep only 256 colours in total.

5. 5

   Export at the final size

   Upscaling a small gradient image stretches its bands. Render or export at the exact size, or larger, rather than scaling up.

Fixing banding in CSS gradients

Browsers render CSS gradients live, so there is no export setting to change. Two things help. First, widen the ramp or add a hue shift. Second, lay a subtle noise layer over the gradient, which works exactly like grain in an image. CSS noise texture shows lightweight ways to make that layer without large image files.

Fixing banding in video and social uploads

Social platforms recompress what you upload, and video codecs are designed to throw away exactly the kind of subtle detail that keeps gradients smooth. Grain helps twice here: it hides steps, and it gives the encoder real detail to keep. Upload at the platform's recommended size so it isn't resized again, and export video at a generous quality setting. If you encode with ffmpeg, x264 has a setting tuned to preserve grain.

# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4

Looping video backgrounds are especially prone to this, because they are usually dark and slow. Seamless loop videos covers the rest of the export.

Preventing banding from the start

• Choose gradients with enough lightness or hue change for their size
• Plan for grain from the beginning rather than adding it as a rescue
• Keep dark gradients a little lifted instead of sliding all the way to pure black
• Proof on a phone after uploading, not only on your design monitor

Every Mark in Gradiently is rendered live at the size you design in, with its grain as part of the recipe, and designs made with a claimed Mark export as PNG or JPEG up to three times the design's size, so a gradient never has to be stretched from a small image.