A blending mode is a rule for combining the color channels of a source layer with those of a backdrop. Instead of simply painting the source over what is behind it, the browser applies a mathematical recipe at every overlapping pixel. This makes effects such as darkening, lightening, tinting, and layered textures predictable rather than mysterious. section 7.6 section 7.6.1
The browser performs blend calculations with normalized channel values from 0 to 1. It converts ordinary RGB values from 0–255 into that range, applies the selected formula, and converts the result back for display. Multiply multiplies corresponding color values and therefore darkens; screen produces the opposite kind of visual result by lightening. section 7.6.1 section 7.8
Choose the CSS property according to the layers you want to combine:
- Use mix-blend-mode when an element’s content should blend with its parent background or other overlapping elements. For example, darken can make an image behave like it is viewed through a colored lens. section 7.6.3
- Use background-blend-mode when multiple background images or a background color should blend within one element before its content is drawn. section 7.6.3
- Remember that an element using a blend mode creates a new stacking context and blends against the parent stacking context’s backdrop. section 7.6.1
Blend an image with a red background
Set the container background to red and apply mix-blend-mode: darken to the image. In overlapping regions, the darker channel values remain visible, producing a dark red lens-like effect. section 7.6.3
Listing 7.11 Using mix-blend-mode
HTML:
<div class="container">
<img src="pink-flamingo.png" alt="Photo" class="blended-image">
</div>
CSS:
.container {
background-color: rgb(255, 0, 0);
}
.blended-image {
mix-blend-mode: darken;
}
Inspect the complete HTML and CSS listing for an image using mix-blend-mode: darken against a red container. section 7.6.3
