Background Blend Mode Mixer
Note: background-blend-mode blends an element's own background layers and needs at least two of them — with one layer it correctly does nothing. To blend an element with the page behind it you want mix-blend-mode, which is a different property with a real performance cost.
The modes group into three families that are worth knowing by behaviour rather than by name. Multiply, darken and colour-burn can only darken — white becomes invisible. Screen, lighten and colour-dodge can only lighten — black becomes invisible. Overlay, soft-light and hard-light do both, darkening the dark areas and lightening the light ones, which is what makes them useful for adding contrast to a photograph without flattening it.
The duotone effect is the practical reason most people arrive here. Two colours, one blended with multiply and one with lighten over a grayscale image, produces the two-tone treatment that lets a set of photographs from completely different sources look like a coherent set. It costs one CSS declaration and no image editing, and it can be changed for a dark theme by swapping two colour values.
One caveat worth knowing before you ship: an element with mix-blend-mode set gets its own stacking context and composites against everything behind it, which is expensive if that element also moves.
Frequently Asked Questions
Why is my blend mode doing nothing?
Usually because there is only one background layer — background-blend-mode blends layers against each other, so it needs at least two. If you meant to blend the element with the page behind it, you want mix-blend-mode instead.
What is the difference between the two properties?
background-blend-mode works inside one element, blending its own background layers together and affecting nothing outside it. mix-blend-mode blends the entire element, its text included, with whatever is painted behind it on the page.
How do I make a duotone image?
Convert the image to grayscale with a filter, then layer two colours over it — one blended with multiply for the shadows and one with lighten for the highlights. Two colour values then control the whole treatment, which is what makes it easy to theme.
Do blend modes affect performance?
background-blend-mode is cheap and static. mix-blend-mode is not: it forces a new stacking context and composites the element against everything behind it, recalculated whenever either moves. It is the first thing to remove if a scrolling or animating section stutters.
Which modes work on white or black?
Multiply, darken and colour-burn treat white as transparent and can only darken. Screen, lighten and colour-dodge treat black as transparent and can only lighten. If a layer is disappearing entirely, it is almost certainly one of these pairings.
