Smooth grayscale, color, and full-spectrum gradients — plus a side-by-side comparison against deliberately banded reference, so you can judge your display against a known baseline instead of guessing.
RUNS ENTIRELY IN YOUR BROWSER · NOTHING IS RECORDED OR UPLOADED
Last updated: · Reviewed for accuracy against current browser APIs
Share:
Look for any visible steps or stripes in the gradient below — a clean display should fade smoothly with no distinct bands.
This is the classic banding test and the easiest place to spot a problem.
Turn on the comparison view.
It splits the screen so you can directly compare a genuinely smooth gradient against a deliberately banded one — the reference you're checking against.
Judge the top half against the bottom half.
If your top gradient looks nearly as stepped as the bottom one, your panel or settings are adding real banding.
Check the individual color channels too.
Red, green, and blue banding don't always match — a channel-specific problem points to color processing rather than the panel itself.
Try fullscreen in a dim room.
Small windows and bright ambient light both make real banding look better than it is.
How this test actually works
Every gradient here is drawn directly on an HTML canvas, computed pixel by pixel from the underlying math rather than relying on a CSS gradient — CSS gradients get interpolated and can pick up their own small rounding quirks depending on the browser, which would muddy a test that's specifically trying to isolate your display's own behavior. The comparison mode's "banded" half is generated by deliberately rounding that same smooth gradient down to just 24 discrete steps instead of the roughly 256 to 16 million it would normally have, giving you an honest, known-bad reference to judge against rather than relying on memory or guesswork.
What causes color banding
The most common cause is simply limited color bit depth. An 8-bit panel can display about 16.7 million colors, which sounds like plenty but still isn't always enough to render an especially subtle gradient — like a clear sky or a soft shadow — without a visible step somewhere. Many budget monitors use a 6-bit panel with dithering to approximate 8-bit output (sometimes marketed as 8-bit outright), and dithering that isn't working well shows up as banding that's more obvious than a genuine 8-bit panel would produce.
Beyond the panel itself, a few settings can make banding worse: a graphics card sending an 8-bit signal over a cable or port that could support 10-bit, heavy image or video compression that throws away subtle color detail before it ever reaches the screen, and "dynamic contrast" or vivid picture modes that add their own processing on top of the original image. Since HDR support depends on similar bit-depth and signal-chain factors, our HDR Test is worth checking too if you're troubleshooting a monitor's color output more broadly.
Is it my display or the content?
This is worth settling before blaming your monitor. Since every gradient here is generated freshly by your browser rather than loaded from a compressed image or video file, it gives you a clean baseline. If this test's gradient looks smooth but a specific video, photo, or game still shows visible banding, the problem most likely lives in that content's own encoding — heavy compression is the usual culprit — rather than your display. If the banding shows up here too, especially at the default settings with no fullscreen or dark-room requirement to speak of, your display or its current settings are the more likely explanation.
Can banding be reduced?
Sometimes, at least partially. Turning off "dynamic contrast" and any vivid or enhanced picture mode removes processing that often makes banding worse than the panel's true limit. If your graphics card, cable, and monitor all support it, enabling a higher color-depth output (commonly labeled 10-bit or "deep color" in GPU settings) can noticeably help even on a panel that isn't a true 10-bit unit itself, since more precision survives the trip from your computer to the screen. An outdated graphics driver can also silently cap this at 8-bit — the latest version from NVIDIA, AMD, or Intel is worth confirming before adjusting anything else.
What none of this can do is turn a genuine 6-bit panel into an 8-bit one, or manufacture color depth the hardware simply doesn't have — at that point, banding in the most demanding gradients is a hardware ceiling rather than a setting.
Frequently asked questions
What does color banding actually look like?
Distinct visible steps or stripes where a gradient should fade smoothly — instead of one continuous transition, you see separate bands of slightly different shades, often most visible in the darker part of a grayscale ramp.
What causes banding on my display?
Most often, limited color bit depth. An 8-bit panel can show 16.7 million colors, but a 6-bit panel with dithering has noticeably less to work with. Wrong GPU color-depth settings, heavy compression, and aggressive "vivid mode" processing can all make it worse too.
How do I know if it's my monitor or just the image or video I'm watching?
Compare this test's mathematically generated gradient against the content that showed banding. If this tool's gradient looks smooth but your video or photo still bands, the content itself is the likely cause rather than your display.
Why test red, green, and blue separately instead of just grayscale?
A display can process each color channel slightly differently. Testing each one on its own reveals banding that's specific to one color, which points toward a processing or calibration issue rather than a general panel limitation.
Can I fix banding with monitor settings?
Sometimes, partially. Turning off dynamic contrast and vivid picture modes often helps. Enabling a higher color-depth output in your graphics card settings can also reduce it. A hardware bit-depth limit on the panel itself isn't something a setting can remove entirely.
Does this tool record or upload anything?
No. Every gradient is generated locally on a canvas element in your browser — nothing is captured, recorded, or sent anywhere.
More tools on ProDeviceTest
Color smoothness is one piece of overall display quality. These cover the rest.
ProDeviceTest