Gradient Banding Test

Inspect browser-rendered gradients for visible steps, breaks, or posterization without inferring panel bit depth.

This 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.

How to run this check

  1. Start the Gradient Banding Test
  2. Choose a gradient direction and color channel
  3. Look for visible steps, breaks, or posterization
  4. Repeat across colors with the same browser zoom, display mode, and room lighting
  5. Record where bands appear; the pattern alone cannot identify panel bit depth

What this browser test can tell you

Can help you check

  • Visible steps in browser-rendered gradients.

Cannot measure

  • This test cannot determine panel bit depth or whether the panel is truly 8-bit or 10-bit.
Setup, interpretation, and sources

Recommended setup

  1. Use the display native resolution and disable browser zoom.
  2. Compare gradients in steady, low-glare room lighting.

How to interpret what you see

  • Record the gradient and location where visible steps or color breaks appear.
  • 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.

Sources

Methodology reviewed:

💡 Why This Test?

This test draws gradients in the browser so you can record visible steps, breaks, or posterization across colors and directions. Browser rendering, operating-system HDR mode, GPU output, display processing, and color management can all create or hide bands, so the observation cannot prove whether a panel is 6-bit, 8-bit, or 10-bit.

✅ What You'll Check:

  • Visible steps/bands instead of smooth color transitions
  • Whether bands change between color channels
  • Posterization in all color channels (R, G, B, white)
  • Gradient quality in different directions (horizontal, vertical, radial)
  • GPU color settings you separately verified and recorded as context, not a detected output limitation

📖 How to Use This Test

  1. Start the fullscreen test for unobstructed view
  2. Navigate through 5 gradient patterns (horizontal, vertical, diagonal, radial, dual)
  3. Test all 7 colors: white (grayscale), red, green, blue, cyan, magenta, yellow
  4. Look for visible bands or steps in the gradient
  5. Record where distinct bands are visible
  6. Note which colors show the most banding
  7. Record the current GPU output format and operating-system display mode separately

Tip: Keep browser zoom, operating-system display mode, GPU output format, and display settings unchanged when comparing observations. Confirm panel bit depth from reliable specifications or controlled signal analysis, not this pattern.

Inspect fullscreen browser gradients. Use arrow keys to navigate patterns.

🌈 What You're Looking For

Example: No Obvious Bands

Smooth transition with no visible steps or bands

⚠️ Moderate Banding

Visible steps or bands instead of smooth gradient

❌ Severe Banding

Heavy posterization with obvious color steps

📋 Testing Guidelines

🎨 Multiple Colors

  • • Test all color channels (R, G, B)
  • • Grayscale gradients show banding most clearly
  • • Some colors may show more banding than others

📐 Multiple Directions

  • • Test horizontal, vertical, and diagonal
  • • Radial gradients are good for corner testing
  • • Banding may be direction-dependent

🔍 Common Causes

  • • Browser gradient rendering or compositing
  • • Operating-system HDR mode or color profile
  • • GPU output format, scaling, or compression
  • • Display processing and picture settings

Note: A smooth or banded browser gradient does not identify panel bit depth. The full browser, OS, GPU, cable, and display path affects the image.

📋 How to Test

1

Start Fullscreen Test

Enter fullscreen mode for accurate gradient assessment without distractions.

2

Test Multiple Patterns

Navigate through 5 gradient patterns (horizontal, vertical, diagonal, radial, dual).

3

Test All Colors

Use color buttons to test white, red, green, blue, cyan, magenta, and yellow gradients.

4

Look for Steps

Identify visible bands or steps in the gradient. Should appear smooth, not posterized.

🔧 Common Issues & Solutions

🎨 "Visible color steps/bands in gradients" (Browser-to-display path observation)

What you observed: The browser-rendered gradient showed visible steps instead of a continuous-looking transition. Browser rendering, operating-system color management, GPU/output format, scaling, compression or screenshot handling, and display processing can each introduce or hide bands.

How to interpret it: Record the color, direction, and screen location where bands appear, then repeat with the same browser zoom, HDR mode, GPU settings, and display preset. A screenshot may preserve, add, or remove artifacts compared with the direct screen view.

✅ Next step: Compare the direct view under controlled settings and verify the GPU/output configuration separately. This browser pattern cannot identify panel bit depth or justify a hardware diagnosis or upgrade.

📏 "Vertical lines/striping in smooth gradients" (Rendering/output-path observation)

What you observed: Repeating vertical lines appeared in one or more browser-rendered gradients. Browser scaling, compositing, the operating-system color path, GPU output, image compression, screenshot handling, and display processing can all affect this appearance.

How to compare: Check the direct screen view at native resolution and 100% browser zoom, then compare with a screenshot only as a separate rendering-path check. Record the OS mode, color profile, output format, and display preset instead of attributing the lines to one component.

✅ Next step: Change one browser, color-management, GPU/output, scaling, or display setting at a time and repeat the observation. Persistent lines in this page do not identify panel quality or bit depth.

✨ "Gradients shimmer/crawl when looking at them" (Motion-dependent observation)

What you observed: A gradient appeared to shimmer or crawl while viewing, scrolling, or changing gaze. Browser animation and compositing, refresh behavior, GPU/output processing, color management, capture methods, and display processing can each influence temporal-looking artifacts.

How to compare: Keep the test stationary, then repeat after scrolling and under one documented refresh and display preset. A camera recording or screenshot introduces another processing path and may not match the direct view.

✅ Next step: Compare one browser, refresh, GPU/output, color-profile, or display setting at a time. This visual effect cannot establish the display's dithering method, panel technology, or bit depth.

🔌 "Banding changes with output or display settings" (Output-path observation)

What you observed: The visible bands changed after an output, resolution, HDR, browser, or display setting changed. That comparison shows that the end-to-end rendering path matters; it does not isolate the cable, GPU, browser, or panel.

How to compare: Document browser zoom, OS HDR and color profile, GPU output format, resolution, connection, screenshot or compression path, and display preset. Change one variable at a time and record whether the same bands remain.

✅ Next step: Verify the intended output configuration using system and device documentation. Browser gradients cannot certify signal precision or identify panel bit depth.

🌈 "White gradients smooth but red/green/blue show banding" (Color-channel observation)

What you observed: Banding looked different between browser-rendered color channels. Color-management transforms, browser compositing, GPU output, compression or screenshot handling, display presets, and the display itself can affect each channel differently.

How to compare: Record which colors and screen regions show steps, keep the viewing angle and settings fixed, and compare the direct display view rather than relying only on a captured image.

✅ Next step: Check the browser, operating-system color profile, GPU/output path, and display mode one at a time. Channel-specific bands in this pattern cannot identify panel bit depth or a hardware limitation.