The short version
- A gradient overlay is a layer of colour that fades across a photo, used to tint the image, set a mood or create a calmer area for text.
- The most common overlay is a scrim: transparent at one edge and dark at the other, so only the part of the photo behind the words is darkened.
- A colour wash overlay uses brand colours at partial opacity, often with a blend mode such as multiply, screen or color, so the photo keeps its detail.
- Overlays work best when they cover only the area that needs help, rather than dimming the whole picture evenly.
- If a scrim has to pass about 80 percent opacity at its darkest edge before the text reads, choose a calmer photo or move the words.
On this page
A gradient overlay is a layer of colour that fades across a photo, laid on top to tint it, unify a set of images or make a headline readable. The trick is that it fades: one part of the photo is touched heavily, the rest barely at all. That is why a gradient overlay looks considered where a flat black box at 50 percent looks like a fix. You choose where the colour lands, how strong it gets and how it mixes with the picture underneath.
Four kinds of gradient overlay
Almost every overlay you see on a website, poster or post is one of four types. Knowing which you need saves a lot of fiddling with opacity sliders.
Use it for
What it does
Use it for
What it does
Use it for
Use it for
The scrim: an overlay for text
A scrim is the workhorse. It starts fully transparent and darkens towards the edge where your words sit, usually the bottom or the left. The photo stays untouched where the subject is, and the text gets a calm, dark floor. Use a dark tone from the photo itself rather than pure black: a deep brown over a warm interior, a navy over a seascape. Pure black looks like a smudge.
The top 40 percent of the bottom scrim is fully clear, which keeps faces and products bright. The darkness builds through the lower half and peaks at the very edge, exactly where a caption sits. For more ways to keep words legible on pictures, read readable text on photos.
Colour wash overlays and blend modes
A colour wash is how brands make stock photos, phone snaps and event pictures look like one family. Lay a gradient of two brand colours over the photo and change its blend mode. The blend mode decides how the colour mixes with the picture, and it matters more than the colours.
Good with
Good with
Good with
Good with
Effect on the photo
Good with
linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(236, 72, 153, 0.55) 55%, rgba(251, 146, 60, 0.45) 100%)How to add a gradient overlay to a photo
- 1
Decide what the overlay is for
Text, mood or consistency. A scrim for text, a wash for mood and consistency. If you can't say which, you probably don't need one.
- 2
Sample a dark tone from the photo
Pick the deepest colour already in the image for a scrim, or two brand colours for a wash.
- 3
Draw the gradient over the area that needs it
Start clear over the subject and build towards the edge with the words. Keep the fade long so there is no visible line.
- 4
Choose a blend mode
Normal for scrims, multiply for light photos, screen for dark ones, color for a single tint.
- 5
Lower the opacity until it almost disappears
Then nudge it back up one step. The best overlays are noticed only when you switch them off.
- 6
Check the text at phone size
Shrink the design to the size it will be seen and read every word. Contrast that works on a monitor can fail on a phone; colour contrast has the targets to aim for.
How dark a gradient overlay should be
Hides the photo
- A flat black layer at 50 percent over everything
- The same overlay on every image, whatever the light
- Pure black or grey that dulls skin and food
- A hard edge where the gradient stops
- Overlay so strong the photo could be anything
Tints the photo
- Clear over the subject, darker only behind words
- Strength adjusted per photo
- A dark tone taken from the image or the brand
- A long, gradual fade with no line
- The photo still recognisable at a glance
As a working limit, if the darkest edge of a scrim has to pass about 80 percent before the text reads, the photo is too busy for that spot. Move the words, crop differently or choose a calmer picture. A wash over the whole image needs far less, or the photo stops looking like a photo.
Gradient overlays on a website
On the web you can stack the overlay and the photo in one declaration, which keeps them together when the image changes. The overlay comes first because CSS paints the first layer on top. The full set of techniques, including blend modes and pseudo elements, is in gradient overlay CSS.
.hero {
min-height: 70vh;
background-image:
linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
url("/images/harbour.jpg");
background-size: cover;
background-position: center;
color: #ffffff;
}A wash that matches your brand every time
Overlays drift when every designer picks their own colours. In the Gradiently Studio, photos can be tinted in your Mark's own colours as mono, duotone or a wash, so pictures from different sources share one palette without hand matching. And when words sit on a Mark rather than a photo, it calms the area behind them by itself, with no overlay at all. Read duotone photos in your Mark's colours for how the wash works.
Without help, the busiest colour runs straight through the headline.
With the Mark responding, the area behind the words calms down, the job a scrim usually does.
Questions people ask
What is a gradient overlay?
A layer of colour that fades across an image, placed on top to tint it, set a mood or make text easier to read. It differs from a flat overlay because its strength changes across the picture.
What opacity should a photo overlay be?
Use as little as makes the text readable: often 50 to 80 percent at the darkest edge of a scrim, and much less for a wash across the whole photo. If you need more, the photo is probably too busy for that spot.
Which blend mode is best for a colour overlay?
Multiply suits light photos, screen suits dark ones, and color swaps the photo's hues while keeping its light and shade. Use normal for scrims behind text.
Should I use black for a gradient overlay?
Usually not. A deep tone sampled from the photo, such as a dark navy or brown, darkens the image without making it look dull.
How do I add a gradient overlay in CSS?
List the gradient first and the image second in background-image, for example linear-gradient(...), url(photo.jpg). The first layer is painted on top.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile