Grain, noise and banding on dark backgrounds

Open a flat dark gradient on a budget laptop and you will likely see what looks like contour lines climbing up the screen. Open the same image on a colour-graded studio monitor and the lines vanish. Both displays show the same file. The difference between them is the heart of the banding problem — and grain is the standard fix.

Why flat black bands

Most consumer displays handle 8 bits per colour channel. That gives 256 levels per channel, which sounds like a lot until you remember that a smooth gradient between two near-black values like #0a0a0a and #1a1a1a uses only 16 of those 256 levels across the entire transition. Spread that over 1080 pixels of vertical screen and several rows have to share the same level before the next step.

Your eye is exquisitely sensitive to step changes between similar dark values — far more so than the equivalent step between similar light values. The result is the visible "contour lines" that designers and video engineers call posterisation or banding.

Why compression makes it worse

JPEG and H.264 (and most other lossy codecs) divide the image into 8×8 blocks and quantise the colour information per block. Smooth dark areas survive the first encoding pass surprisingly well, but as soon as the codec drops bitrate — for storage, for streaming, for a flaky video call — the dark blocks all collapse to the same value. The eye sees this as enlarged blocks of a single near-black tone with sharp edges between them. Banding goes from "subtle" to "ugly".

This is why every modern streamer (Netflix, YouTube, Twitch and the rest) deliberately shoots and grades dark scenes with a small amount of grain rolled in. The grain survives compression as random per-pixel variation, which prevents the codec from collapsing dark areas to flat blocks.

How grain fixes it

Grain — also called dithering when its amplitude is calibrated — works by adding a tiny random offset to each pixel's value. The offset is small enough that the average tone of any region is unchanged, but it is enough to push pixels across the boundary of an 8-bit level. Where banding made dozens of rows share the same level, grain forces them across two or three levels in a randomised pattern; the eye averages this back to the smooth gradient you wanted in the first place.

For a dark hero with banding, the practical recipe in the generator is:

• Lightness 0–10%, saturation low.
• Pattern: noise (or any pattern at low density).
• Pattern density: 5–15%.
• Grain effect: 5–15%.

That much grain is invisible at viewing distance — you have to lean toward the screen to see it — but it kills the banding completely on cheap monitors and in compressed video.

Noise vs grain: are they the same thing?

Roughly yes, with a useful distinction. The generator's pattern dropdown has a "noise" option that lays down a fine random texture as a pattern layer. The effect grain slider applies a finer, lower-amplitude random variation across the entire image. They serve different purposes:

• Pattern noise is visible at any distance — it is part of the look. Reach for it when you want a subtle "rendered, not generated" feel.
• Effect grain is below the threshold of casual notice — it is purely a banding mitigation. Reach for it when the look should read as "smooth", but flat black would band.

For most exports, both at low values is the right combination. Pattern noise at 5% plus grain at 10% gives a surface that looks intentional on a high-end screen and stays smooth on a low-end one.

What it costs

Grain is the one effect that actively trades file size for visual quality. PNG compresses long runs of identical pixels well, which is exactly what flat black is — and exactly what grain destroys. A 4K PNG of pure black is tiny; the same image with 10% grain runs several megabytes.

Two practical responses:

1. If file size matters (web hero, email signature), use the lowest grain level that fixes the banding on your target display, not the level that looks best on yours.
2. For web delivery, consider serving a compressed JPEG or AVIF instead of PNG once grain is in the image. JPEG handles random texture more efficiently than PNG does at the cost of some local variation that grain hides anyway.

When grain is the wrong tool

Three cases where adding grain hurts:

• Body-text backgrounds. Grain interacts with anti-aliased glyphs in unpleasant ways at small text sizes; the letters appear to "shimmer". For surfaces where readers will read paragraphs, keep grain at zero and lift the base colour from #000 to #0a0a0a — see pure vs near-black.
• Static logos and icons. A grain layer behind a logo can make the logo edge look smudged. Mask the logo region or skip grain.
• Print at small sizes. Grain that looks fine on a screen can print as a coarse stippling on small business cards or tight-folded brochures. For print, prefer a near-black base colour (which prints clean) over a flat black with added grain.

A worked decision

You exported a 4K PNG for a backstage display in a venue. On your laptop it looks perfect. Plugged into the venue projector during a rehearsal, the dark gradient shows visible bands climbing across the screen.

1. Diagnosis: the projector is 8-bit, and HDMI compression on the run between machine and projector is collapsing the near-black levels.
2. Fix: re-export with grain at 10% and pattern noise at 5%. Optionally drop the gradient by lifting the bottom stop from #000 to #080808; see CSS gradients for stop placement.
3. Verify: play the asset back through the same projector before the venue is full.

Common mistakes

1. Cranking grain to 50% to "fix" banding. The banding goes away, but the surface now looks like sand. The threshold is much lower than people guess.
2. Using grain on a body-text page. Glyphs shimmer at small sizes; readers feel it as eye strain.
3. Trusting your monitor. Cheap monitors band where studio displays do not. Test on the actual delivery device, especially for print and projection.
4. Forgetting that JPEG erodes grain. A heavily compressed JPEG will eat the grain you added; either use PNG/AVIF, or add slightly more grain than looks ideal in source.
5. Choosing pattern density and grain independently. They stack. If your pattern is already noise at 30%, adding 30% effect grain is overkill; the pattern guide covers density choices.

Quick checklist

• Does the asset look fine on the delivery device, not just on yours?
• Is grain at the lowest level that hides banding, not the level that "looks textured"?
• Is the surface free of small text where grain causes shimmer?
• Is file size acceptable for the delivery channel?
• Do the gradient stops avoid the worst of the banding region by lifting from #000 to #080808?

What to do next

Open the generator, push the grain slider up while watching the matrix tiles, and stop at the lowest setting where the banding goes away. If you are working with gradient stops, see CSS gradients; if you are choosing a pattern, the pattern guide applies. For video-specific banding (where the codec, not the display, is the culprit), the video and streams page goes deeper.

Last reviewed on 28 April 2026.