Gradient Test
FreeCheck your screen for color banding with grayscale, RGB channel, radial, and hue wheel gradient patterns, in fullscreen.
Runs entirely in your browser.
Keyboard: arrow keys to switch pattern, F for fullscreen, Esc to exit.
What this tool does
This tool displays six gradient patterns, right in your browser, grayscale, individual red, green, and blue ramps, a radial gradient, and a full hue wheel, to help you check your screen for visible banding across different directions and colors, with a fullscreen mode for a closer look.
How It Works
The grayscale and single-channel patterns are CSS linear gradients running from black to full white, red, green, or blue, letting the browser interpolate as many intermediate shades as it can along a straight line. The radial pattern does the same interpolation outward from the center in a circle instead of a line. The hue wheel is built as a CSS conic gradient with 24 evenly spaced color stops, 15 degrees apart, computed from the HSL color wheel at full saturation, so the browser smoothly interpolates between each pair of adjacent stops all the way around a full 360-degree circle.
Problems it solves
- Checking a display for visible color banding before assuming an image or video file is the problem.
- Isolating whether a banding issue affects one color channel more than others.
- Comparing gradient smoothness across straight, radial, and circular hue transitions.
- Getting a quick visual reference for a display's overall color smoothness before color-sensitive work.
Frequently asked questions
›What causes visible banding in a gradient?
It usually means there are not enough distinct color steps available to render a truly smooth transition, whether from a lower bit-depth panel, an 8-bit color connection or output setting, aggressive display processing, or the source content itself being lower quality than it appears.
›Why does the hue wheel matter, isn't a straight ramp enough?
A straight ramp only tests transitions along one line, the hue wheel instead sweeps through every hue at once in a full circle, which can reveal inconsistent smoothness at specific colors or angles that a simple black-to-white ramp would never touch.
›Why test red, green, and blue ramps separately from grayscale?
A display can render one color channel more smoothly than another. Testing each primary color on its own isolates that channel completely, so a banding issue specific to, say, the blue channel will not be hidden by the other two channels compensating for it.
›What is the radial gradient testing that the others are not?
It transitions outward from a center point in every direction at once, testing a circular, expanding pattern rather than a straight line, which can behave differently on some displays or under some video scaling and processing settings.
›Can browser settings or video output cause banding even on a good display?
Yes. A cable or port limited to 8-bit color, an operating system color setting, GPU scaling, or even browser hardware acceleration can all introduce banding that has nothing to do with the panel itself, which is worth ruling out before assuming the display is at fault.
Related Tools
Hardware
Dead Pixel Test
Cycle full-screen through 9 solid colors to spot dead, bright, or stuck pixels on any monitor, laptop, phone, or TV, with an auto-play mode for hands-free scanning.
FreeHardware
Burn-in Test
Reveal OLED, plasma, or other display burn-in with solid gray, black, and white fields, plus a Flicker Boost mode that alternates gray shades to make faint marks easier to spot.
FreeHardware
Greyscale Test
Check a display for banding, shadow crushing, and highlight clipping with a real continuous 0-255 grey gradient, an interactive value readout, and a dedicated near-white patch set.
FreeHardware
Refresh Rate Test
Measure your display's real, live refresh rate right in your browser using requestAnimationFrame timing, and catch a monitor advertised at 144Hz or higher that is really only running at 60Hz.
Comments (0)
Found this tool useful? Leave a comment, share a tip, or tell us how we can make it better.
No comments yet. Be the first to share your thoughts!