Gradient Test - Check Color Banding Online
Use CSS-generated fullscreen gradients to look for visible color banding, broken transitions or unusual dithering on your screen.
Quick answer
A gradient test helps reveal banding, crushed shadows, clipped highlights and rough color transitions across smooth ramps.
Method: ScreenTestKit generates the test surface in your browser. Results depend on visual inspection; the site does not read or diagnose physical panel hardware.
How to use this test
- Open the gradient test in fullscreen mode.
- Check dark-to-light, grayscale and color gradients.
- Turn off aggressive contrast, vivid color and low-quality compression modes if possible.
- Compare with the monitor color test if banding appears on multiple gradients.
What to watch for
- Hard stripes where a smooth transition should appear.
- Missing dark tones near black or missing bright tones near white.
- Color steps that are much stronger on one browser, cable, HDR mode or refresh setting.
- Banding that appears in normal photos or video, not only in synthetic gradients.
How to interpret results
Fine steps only
Some banding is normal on limited bit-depth panels or compressed content.
Severe broad bands
Check display mode, color depth, HDR, cable, GPU output and monitor settings.
Banding plus tint
Run the screen uniformity and color tests to separate gradient behavior from panel tint.
Frequently asked questions
Does this measure color accuracy?
No. It visually checks smoothness and obvious banding, not measured color accuracy.
Why does banding change with HDR or browser settings?
Color depth, tone mapping and GPU output settings can change how gradients are displayed.