Overlay a gradient on a photo

Add a colored gradient over a photo, with adjustable angle, colors and opacity — ideal for preparing a banner with readable text or a social media visual with a consistent style.

Example:
Drag and drop, or click to browse (30 MB max)

How it works

This tool draws a linear gradient between two colors, oriented at the angle you choose, and overlays it on your photo at the opacity level you set. Unlike a solid fill, the gradient keeps texture visible while unifying the image's tones and darkening (or lightening) certain areas to improve the readability of text added afterward.

How do I get the classic "darkened bottom" effect used on web banners?

Set the angle to 90° (vertical gradient), choose a transparent-looking start color close to black at the top, a black end color at the bottom, and an opacity between 50 and 80%: the bottom of the image will be darkened to hold readable white text, while the top stays closer to the original photo.

Does the gradient replace the photo's colors or sit on top of them?

The gradient is applied over the original photo with the transparency you choose: at 100% opacity it almost entirely hides the image, while at 20-40% it only lightly tints the existing colors without erasing them.

100% local processing: the gradient is drawn directly in your browser using Canvas — your photo is never sent to a server.