Skip to content
Browser Screensaver

Gradient & Banding Test

A smooth ramp from black to full brightness. A panel that cannot resolve every step shows visible bands rather than a continuous gradient.

Press F for fullscreen, Esc to exit.

What the gradient & banding test shows

Banding is what you see when a display cannot show all the steps between two tones, so a smooth gradient becomes a series of flat strips with visible edges. Cheap 6-bit panels do it badly; 8-bit panels showing 10-bit content do it subtly.

The ramp is drawn one pixel column at a time rather than with a CSS gradient, because the browser dithers its own gradients on some platforms — which would hide exactly the artefact this test is looking for.

How to read a banding test

Look along the ramp for edges. A good panel shows a continuous change with no visible steps; a poor one shows distinct strips, most obviously in the darker third where the eye is most sensitive to small differences.

The "force banding" control quantises the ramp deliberately, which gives you a known-bad reference to compare against. If your smooth gradient looks like the eight-step version, the problem is real rather than imagined.

Try each channel. Banding is often worse in one colour than the others, which usually points at the panel rather than the signal.

What this test cannot tell you

A browser cannot read your panel’s bit depth. What you see also depends on your graphics driver, the colour profile in use, and whether anything in the chain is dithering — so this shows you the result, not the cause.

Questions

What causes colour banding?

A display that cannot resolve every step between two tones. Common causes are a 6-bit panel using dithering to fake 8-bit, an 8-bit panel showing 10-bit content, or aggressive compression in the source material.

Is banding a fault?

Not necessarily. Mild banding in dark tones is normal on most consumer displays. Obvious strips across a mid-tone gradient suggest a low bit-depth panel, which is a specification rather than a defect.

Why does my gradient look worse in a browser than in a photo app?

Colour management. Applications that manage colour properly often dither their output, which hides banding. This page draws exact values without dithering, which is what makes it a test.

Is the gradient & banding test free?

Yes — free, with no account, no download and no limit. It is a web page, so it runs on any device with a modern browser.

Do I need to be fullscreen?

For anything involving the whole panel, yes. Press F, or the fullscreen button. On a desktop browser F11 also hides the browser toolbars, which matters for the tests where a bright strip at the top of the screen would affect what you are looking at.