A blending mode controls how stacked colors combine, producing a new composite color for each corresponding pixel. CSS applies blending to multiple backgrounds or to separate elements. section 13.3 section 13.3.2
Use blending modes for practical visual treatments:
- Combine opaque background images without relying on transparency; multiply keeps both differently positioned copies of an image visible. section 13.3
- Tint an image by blending a background color with its luminosity, hue, and saturation; layer order changes the result. section 13.3.1
- Add grayscale film grain or canvas texture with contrast modes such as overlay, hard-light, or soft-light. section 13.3.3
- Blend text, borders, and other element content with a container’s background through mix-blend-mode, while protecting readability. section 13.3.4
Layer two images
A reusable background treatment places two copies of bear.jpg at different positions, sizes them with cover, and applies background-blend-mode: multiply. section 13.3
Listing 13.14 Blending two background images
.blend {
min-height: 70vmin;
background-image: url(images/bear.jpg), url(images/bear.jpg); #1
background-size: cover; #2
background-repeat: no-repeat; #2
background-position: -30vw, 30vw; #3
background-blend-mode: multiply; #4
}
Inspect the complete CSS pattern for blending two background images, including layer order, positioning, sizing, repetition, and the blend property. section 13.3
Listing 13.17 Using mix blend mode to blend multiple elements
.blend {
background-image: url("images/bear.jpg");
background-size: cover;
background-position: center;
padding: 50vmin 0 1em;
}
.blend > h1 {
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 6rem;
text-align: center;
mix-blend-mode: hard-light; #1
background-color: oklch(25% 0.2 25deg); #2
color: #808080; #3
border: 0.1em solid #ccc;
border-width: 0.1em 0;
}
Inspect an element-level example that blends a large heading with its image-backed container using hard-light and a medium-gray text color. section 13.3.4
CSS provides 15 modes grouped as darkening, lightening, contrast, compositing, and comparing effects; choosing among them often requires experimentation. section 13.3.2
