Quick tip: reduce visible bands in a gradient

Visible stripes in a smooth gradient are usually called banding. They appear when a gradual change is represented by too few distinct values, or when compression and display processing make those steps more obvious.

This updated quick tip keeps the subject of the original article while offering a practical diagnostic workflow. No filter can guarantee a perfectly smooth result on every screen.

Find where the bands appear

Compare the editable source with the exported file at 100% zoom. If the source is smooth but the export is not, inspect the export settings and color conversion. If both have bands, check the document precision and the size and contrast of the gradient itself.

View the same file in another application or on another display. Do not repeatedly modify a good source to compensate for one preview pipeline. Dark, low-contrast gradients often reveal steps that are less visible in a brighter composition.

Try subtle dithering

A small amount of noise can break up a hard boundary between adjacent values. Keep it subtle enough that the image still reads as a smooth surface rather than a grain effect. Apply it to a copy or through an editable layer so you can reduce it later.

If your editor offers gradient dithering, compare it with a manual noise layer before combining both. Review the relevant controls in Photoshop’s documentation or the GIMP manual.

Export and test again

Avoid repeated lossy saves. Export from the working master, inspect the actual delivery size, and compare file weight as well as appearance. For a web background, a CSS gradient may avoid an image download, although it can still band on some displays.

The goal is a cleaner final appearance at the intended size—not a perfectly smooth zoomed-in preview that costs an unnecessarily large asset.