Where Colour Banding Comes From, and How to Stop It

You put a cutout on a smooth gradient background, and instead of a smooth gradient you get stripes. Broad, soft-edged bands marching across what should be a continuous blend. They are most obvious in skies, in studio backdrops, in anything that fades from one colour to a similar one, and they look like a rendering bug.

They are not a bug. They are arithmetic, and once you can tell which of four causes produced yours, the fix is usually one step.

256 steps, and no more

An ordinary image stores each of red, green, and blue as one byte per pixel. One byte gives 256 possible values. That is the entire vocabulary available for describing how bright that channel is at that point.

Now consider a gradient 1000 pixels wide that fades from one dark blue to a slightly different dark blue. If those two colours are 20 steps apart in value, the gradient has 20 steps to distribute across 1000 pixels. Each step is 50 pixels wide. That is not a subtle transition, it is a 50-pixel stripe, and your eye is extremely good at finding the edges between stripes even when each edge is a single unit of brightness.

This is the key insight and it is counterintuitive: banding is worst when the two colours are similar, not when they are far apart. A gradient from black to white has 256 steps to work with and looks smooth. A gradient between two neighbouring shades of navy has almost nothing to work with and bands badly.

Four causes, and how to tell them apart

The gradient was generated in 8 bits. If you built the background yourself, whether in a design tool or with Add Background, the banding was created at the moment the gradient was drawn. It is in the pixels. Saving as PNG will preserve it perfectly, because PNG is lossless and faithfully preserves exactly what you gave it.

The source photograph only ever had 8 bits. A sky photographed as JPEG arrives with its gradient already quantised. Nothing downstream created the bands; they were in the file when it reached you.

An edit stretched a narrow range. Raising contrast, lifting shadows, or pushing exposure takes a range of values and spreads it over a wider one. A region that occupied ten levels now occupies forty, and the gaps between them are now visible. This is why banding often appears only after a filter or a grade, in an image that looked fine before.

A lossy encode quantised it. JPEG divides the image into small blocks and discards fine variation inside each one, which is exactly the wrong behaviour for a large smooth area: it has little detail to protect, so the encoder cheerfully flattens it, and the flat regions it produces do not line up with each other.

The diagnostic is simple. Export the same image as a lossless PNG and look at it. If the PNG bands, the problem is in your pixels and the cause is one of the first three. If only the compressed version bands, the encode did it.

Compare Formats makes that a single step: one upload produces a lossless PNG, WebP at two quality levels, AVIF, and a JPG, side by side with their file sizes. Looking at all of them at once answers both questions people actually have, which are whether the banding is the format's fault and what the smooth option costs.

Measuring it, so you stop guessing

The Colour Picker turns this from an argument into numbers. Sample a few points across a band and then a few points across the next one. If the values inside a band are identical and jump by one or two between bands, you are looking at quantisation and the maths above is your explanation.

It also tells you whether a gradient you thought was flat is actually drifting, which is a different problem with a different fix.

What actually helps

Widen the gradient. If you control the colours, push them further apart. More distance between the endpoints means more steps available, and the same pixel width now has narrower stripes. Two colours that are nearly identical will band no matter what you do to the file afterwards.

Make the gradient smaller, or steeper. The same number of steps across a shorter distance produces narrower bands, and narrow enough bands stop reading as bands. A gradient that fills a 3000-pixel-wide banner is the hardest case there is.

Add a small amount of noise. This is the professional answer and it feels wrong the first time you hear it: deliberately damaging the image fixes it. A light grain breaks up the hard boundary between adjacent levels, so the eye averages across the transition instead of finding an edge. The Image Filter Editor has a Film Grain preset, and running it at low intensity over a banded background is often the whole fix. Strength matters: enough to break the edges, not enough to look like a texture.

Choose the format for the content. For a large smooth gradient, JPEG is the weakest of the usual options. WebP and AVIF generally hold smooth areas together better at comparable file sizes, and PNG holds them perfectly at a much larger size. There is no need to take this on faith, which is the point of comparing them on your own image rather than on someone else's.

Do not stack lossy passes. Compressing an image that has already been compressed gives the second encoder a picture whose flat regions are already artificial, and it will quantise those again. If you have the original, go back to it, and if you need a specific file size, the Image Compressor can search for the highest quality that fits under a target rather than making you guess at a number and re-encode repeatedly.

The specific case of a gradient behind a cutout

This combination is worth calling out because it is so common and because it fails in a particular way.

A cutout on a generated gradient has a soft, partially transparent edge sitting on top of a background made of flat bands. Where a band boundary crosses the subject's edge, you get a visible step running through what should be a smooth transition, and it draws the eye straight to the join.

Two things help. Use a gradient with a decent spread between its colours rather than a barely-there tonal shift, which is the most common choice and the worst one. And apply a light grain over the finished composite rather than over the background alone, so the subject's edge and the background share the same texture.

A flat solid colour is also an entirely respectable answer. A solid has no steps to band, and a great many listing photos, headshots, and product shots look better on one.

The summary

Banding is the gap between the colours you asked for and the 256 values available to express them. It is worst when the two ends of a gradient are close together and spread over a large area. Check a lossless export to find out whether it is in your pixels or in your encode, widen the gradient if you control it, add a little grain if you do not, and pick the output format by comparing it rather than by reputation.