Gradient Overlay Generator
A gradient over a photo so the text on it stays readable — a smooth fade or a colour tint, with the contrast measured on your actual image. Your photo never leaves your device.
Why an overlay
Text straight on a photo is a gamble: a bright sky or a white wall behind one word and it disappears. A gradient overlay darkens (or lightens) just the part of the image under the text, so the photo stays bright everywhere else.
A smooth fade, not a hard line
A plain linear-gradient(to top, black, transparent) leaves a visible edge where it ends. Smooth fade uses nine eased stops — strong where the text sits, tapering gently to nothing — so you never see where the overlay stops. Reach sets how far up the image it goes.
Checked on your photo
The tool redraws the preview on a canvas and checks every pixel behind the text, reporting the contrast at the weakest spot: 4.5:1 or more passes WCAG AA for body text, 3:1 is enough for large headings. Your photo stays in your browser — nothing is uploaded.
For a colour wash over a whole image, try Colour tint with multiply or soft light, or turn a photo into two colours with the Duotone Generator.