Multiply, Screen, Overlay: anyone who has ever opened photo-editing software recognizes these blend mode names, used to combine two layers in a more nuanced way than plain transparency. mix-blend-mode brings the exact same formulas straight into the browser.
The property answers a different question than plain transparency: it is no longer about letting what's behind show through, it is about calculating a brand new color out of the two stacked layers.
Definition
mix-blend-mode defines how an element's render combines with whatever sits behind it, using a blending formula instead of a plain transparent overlay. Its default value is normal, matching the usual stacking behavior with no blending at all: the element simply covers whatever is underneath.
.dark-logo {
mix-blend-mode: multiply;
}The most useful modes
Each mode calculates its result differently, but two of them cover the vast majority of real-world needs.
| Mode | Effect | Typical case |
|---|---|---|
multiply | Darkens, white turns transparent | A dark logo placed on a light background |
screen | Lightens, black turns transparent | A light texture or glow effect |
difference | Inverts the overlapping CSS color values | Text that stays readable regardless of the background |
overlay | Boosts existing contrast | Dressing up a photo without uniformly darkening it |
Use case: text that inverts over an image
The most demonstrative example of mix-blend-mode is a white heading that stays readable over a photo, no matter how bright or dark that photo is in different spots. With difference, the browser calculates, pixel by pixel, the gap between the text color and the image color underneath, producing dark text over bright areas of the photo and light text over its dark areas, without ever having to guess the dominant color in advance.
.inverted-title {
color: white;
mix-blend-mode: difference;
position: relative;
z-index: 1;
}A duotone effect with two layers
Stacking two colored elements with different modes, multiply on one and screen on the other for instance, produces a duotone-style effect widely used in editorial design: a photo turned grayscale receives two complementary tones instead of a full palette, one for shadows, one for highlights. This technique replaces a dedicated image export with a purely CSS combination, editable live in the browser without going back to editing software for every color tweak.
mix-blend-mode and the stacking context
An element with mix-blend-mode blends with everything that appears behind it within the same stacking context, which sometimes includes sibling elements never meant to be part of the effect. To limit the blending to a specific pair, such as an image and its caption only, the isolation: isolate property set on their shared container creates a new, sealed blending zone, keeping the rest of the page from interfering.
isolation: isolate on the direct container of the two elements involved before looking any further.Frequently asked questions
mix-blend-mode and opacity?opacity simply lets what's behind an element show through by reducing its own opacity, without changing the formula used to compute colors. mix-blend-mode, on the other hand, computes an entirely new color out of the two layers, following the formula specific to the chosen mode, which produces far more varied effects than plain transparency.
Because mix-blend-mode acts by default on everything appearing behind the element within its stacking context, not just its direct parent. isolation: isolate set on a shared container fixes this by sealing the effect inside that container.
mix-blend-mode work on text, or only on images?It works on any content, text included, since it acts on the element's final render rather than on a specific content type. That is exactly what makes the inverting-title-over-a-photo effect possible, one of the property's most common uses.