Black and white gradient
This gradient runs from pure black on the left to pure white on the right, the full range of greys in one image. It's useful as a backdrop, a fade mask in an image editor, or a test of how a screen shows shades.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
- Black against white
- 21:1, the highest contrast ratio there is (ratios run from 1:1 to 21:1)
- Source: w3.org, checked 2026-11
- Where text switches (in the PNG)
- White text reaches 4.5:1 only over roughly the left 46%, black text only over roughly the right 54%
Want a page that already looks finished?
A free Liite page comes with 15 themes, from soft sunset tones to plain black and white, plus gradient and pattern wallpapers of your own. Pick one, add your links, and your page is live at liite.co/yourname.
Black and white gradient: what to know
This page starts the background generator for this case. For every option and how to use it, see the background generator.
Using it as a mask
Many image and video editors use black and white as a mask: black hides, white shows, and grey shows partly. Download the PNG at the same size as your image and use it as a layer mask for a smooth fade from one side. Make it radial for a vignette that fades from the centre.
Questions
How do I make a vertical black and white gradient?
Set the angle to 180 for black at the top and white at the bottom, or to 0 for the reverse.
Can I put text on a black and white gradient?
Yes, but no single colour works across all of it. Put white text on the dark half and black text on the light half.