Gradient Banding Test
Inspect browser-rendered gradients for visible steps, breaks, or posterization without inferring panel bit depth.
Go to test controlsThis check opens a focused test surface. You can return with Escape. Review what this browser test can and cannot measure.
Before you start
- Use 100% browser zoom and keep the operating-system display mode unchanged.
- Record the current display and GPU settings before comparing runs.
Step-by-step instructions
How to run this check
- Start the Gradient Banding Test
- Choose a gradient direction and color channel
- Look for visible steps, breaks, or posterization
- Repeat across colors with the same browser zoom, display mode, and room lighting
- Record where bands appear; the pattern alone cannot identify panel bit depth
Inspect fullscreen browser gradients. Use arrow keys to navigate patterns.
Are the bands already in the picture?
A picture made from a few gray values has visible boundaries before it reaches your monitor. Compare the two rows below: the top contains 256 source values; the bottom deliberately contains fewer. These are teaching references drawn by this site, not photos of a good or bad display.
Upper row: 256 values, from RGB (0, 0, 0) to (255, 255, 255).
The preview fits the available width. Resizing and your browser's display path can change how its steps look. The original PNG is always 512 × 256 image pixels.
Download this reference PNGRead the numbers before judging the screen
Lower-row codes: 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238, 255.
All three RGB channels use the same code. For example, choosing 16 values makes neighboring codes differ by 17. Reducing the number of source values creates wider plateaus even on an otherwise functioning display.
A code of 128 is not a measurement of half the screen's light output. The 256-value row is also finite; it is not a perfectly continuous ramp. Neither row can identify whether your panel uses 6-bit, 8-bit, 10-bit, or temporal dithering.
How this site's reference is made
The top half uses every integer gray code from 0 through 255, each for two image columns. The bottom divides the same width into N equal groups and uses round(group × 255 ÷ (N − 1)), starting at group 0. Every pixel is opaque. The preview and download use the same PNG; there is no automatic display assessment.
The browser version writes these values into sRGB ImageData and exports PNG. The lossless file preserves the encoded reference; a viewer may still scale or color-manage how it appears.
Make a comparison that answers one question
- A: open the downloaded PNG in your browser. Record its image zoom, OS display mode, monitor preset, and connection. Use 100% image zoom where available and note any fit-to-window resizing. The fullscreen gradient above is a separate pattern; do not use it as the A image in this comparison.
- B: open that same PNG in another viewer. Keep the monitor, display settings, and viewing size unchanged. Compare the upper and lower rows separately. Record any sizing or color-management difference you cannot match.
- A again: return to the PNG in the browser. Check whether its original appearance returns. If another setting or viewing size changed, the comparison is inconclusive; repeat with that difference recorded.
| Observation | What it supports | Next action |
|---|---|---|
| The lower row has the chosen number of plateaus in both viewers | Those boundaries are deliberately encoded in the file. | Do not count these reference boundaries as display defects. Describe any additional pattern separately. |
| The same PNG looks different between viewers at matching size | The rendering or color-management paths may differ; the source file did not change. | Record both viewers and modes, then return to the first. Do not replace the monitor based on this comparison alone. |
| A change appears only after changing one output or picture setting | That configuration affects the appearance under these conditions. | Restore the original setting and check repeatability. Keep the exact before/after setting in your notes. |
| Both viewers show the same unexpected band in the upper row | This does not isolate the panel; the source and much of the display path are still shared. | If available, compare a second supported input or another display, and record what remained constant. Use suitable measurement equipment for bit-depth or color-accuracy claims. |
Keep an observation someone else can repeat
“Reference: 256 vs __ values. Viewer A at __ zoom: __. Viewer B at __ zoom: __. Same display mode/preset: __. Returning to A: __. The unexpected band was on the __ row at __.” Write “not checked” for comparisons you did not perform.
Save findings from the fullscreen test in its observation form. Keep source-reference comparisons in the notes and review them in saved observations or the support report. A camera photo can add information about location, but its processing is another variable.
What this browser test can tell you
Can help you check
- Visible steps in browser-rendered gradients, with an exact-source PNG for comparing deliberately encoded boundaries.
Cannot measure
- This test cannot determine panel bit depth or whether the panel is truly 8-bit or 10-bit.
Interpret this observation
- Record the fullscreen gradient and location where unexpected steps appear; the downloadable lower row contains intentional source boundaries.
- Browser rendering, operating-system HDR mode, GPU output format, display settings, and color-management transforms can introduce or hide bands.
- Exact bit-depth and signal analysis requires a controlled signal generator and capture or measurement hardware.
Setup and sources
Recommended setup
- Record the native resolution, display mode, browser zoom, and picture preset before comparing.
- Compare gradients in steady, low-glare room lighting.
Sources
Methodology reviewed: