mix-blend-mode & isolation
mix-blend-mode controls how an element's content blends with whatever renders BEHIND it — the same concept as layer blend modes in Photoshop or Figma. Instead of simply painting on top, the element's pixels are combined with the backdrop's pixels using a math formula (multiply the color values, take the lighter one, invert and compare them, and so on), producing effects that would be difficult or impossible with plain opacity and layering.
Common blend mode values
Value | Effect |
|---|---|
multiply | Multiplies colors together — result is always darker than either layer. Great for tinting/shading. |
screen | Opposite of multiply — result is always lighter. Good for glows and light effects. |
overlay | Combines multiply and screen based on the backdrop — darkens dark areas, lightens light areas, boosting contrast. |
difference | Subtracts colors from each other — identical colors turn black, produces strong, often psychedelic contrast. |
Worked example — text blending with a photo
.hero {
position: relative;
background-image: url('/images/texture.jpg');
background-size: cover;
}
.hero-title {
color: white;
font-size: 4rem;
font-weight: 800;
mix-blend-mode: difference;
/* The white text inverts against whatever part of the
photo sits behind each letter, so it reads clearly against
both light and dark parts of the image without needing an
overlay or drop-shadow */
}Because difference produces high-contrast results against any backdrop color, this is a common trick for making overlaid text legible on a busy photo without darkening the whole image with a scrim.
Containing blend effects with isolation
By default, mix-blend-mode blends an element with EVERYTHING behind it in the stacking context — including elements you didn't intend to affect, like a page background far below a whole stack of content. isolation: isolate creates a new stacking context so an element (or group) only blends with its own siblings/backdrop within that isolated group, not with anything further back.
/* Without isolation, .badge would blend with the page
background AND anything else stacked behind the whole card */
.card {
isolation: isolate;
position: relative;
background: white;
}
.badge {
mix-blend-mode: multiply;
/* Now this only blends with .card's own background/content,
because .card established an isolated stacking context */
}