CSS Blend Modes: mix-blend-mode Explained

CSS blend modes combine an element’s colors with whatever sits beneath it, the same way layer blend modes work in an image editor — multiplying, screening, or otherwise mixing pixel values instead of one layer simply covering the other. Two properties expose this: mix-blend-mode, which blends an element with the content behind it, and background-blend-mode, which blends an element’s own background layers with each other.

How mix-blend-mode works

mix-blend-mode tells the browser to compose an element with everything painted before it in the same stacking context — the elements behind it, not just its own background. Set it on an image, a text block, or a colored overlay div, and the browser recalculates every pixel by combining the element’s color with whatever is underneath, using the blend formula you choose.

.overlay {
  mix-blend-mode: multiply;
}

Because blending operates on the stacking context, it can reach further than you intend — a blended element can pick up colors from siblings, the page background, or anything else painted earlier. See what CSS stacking contexts are for how paint order is determined; blend modes ride directly on top of that order.

How background-blend-mode differs

background-blend-mode is narrower: it only blends an element’s own background layers — a background image against a background color, or multiple stacked background images — with each other. It never reaches outside the element, so it can’t pick up colors from siblings or the page behind it.

.duotone {
  background-image: url("photo.jpg");
  background-color: #1e3a8a;
  background-blend-mode: multiply;
}

That single rule produces a duotone effect — a photo tinted toward one color — without a second element, a pseudo-element, or a canvas overlay. It pairs naturally with CSS gradients: blend a gradient over an image as a background layer instead of layering an extra div for the tint.

The common blend mode values

Both properties accept the same set of values, grouped by what they do to lightness and contrast:

• multiply — darkens by multiplying color values; white has no effect, black produces black. Good for tinting photos.
• screen — the inverse of multiply; lightens, and black has no effect. Good for light-leak or glow effects.
• overlay / hard-light — combine multiply and screen depending on the base color, boosting contrast.
• darken / lighten — keep whichever of the two colors is darker or lighter, per channel.
• difference / exclusion — subtract colors from each other, useful for high-contrast, almost photo-negative effects.
• hue, saturation, color, luminosity — take one channel (hue, saturation, or combined color/luminosity) from the top layer and the rest from the base, useful for recoloring grayscale art without losing its shading.

mix-blend-mode vs background-blend-mode

	mix-blend-mode	background-blend-mode
Blends with	Content painted behind the element (siblings, page)	The element’s own background layers only
Scope	Stacking context — can reach outside the element	Contained to the element’s background
Typical use	Text-over-image knockouts, colored overlays	Duotone images, tinted gradients over photos
Risk of surprise	Higher — can blend with unintended elements	Lower — self-contained

Containing the blend with isolation

Because mix-blend-mode blends against the whole stacking context, it’s easy to end up blending with elements you never intended to touch. The isolation: isolate property fixes this: it forces an element (and its descendants) into their own stacking context, so a blend mode set inside that group only sees the group’s own content, not the page behind it.

.card {
  isolation: isolate;
}
.card .badge {
  mix-blend-mode: difference;
}

Practical uses

• Colorized photography. background-blend-mode: multiply or color over a photo, driven by a CSS custom property for the tint color, gives a reusable duotone treatment across a design system.
• Text-over-image legibility. mix-blend-mode: difference or exclusion on a heading keeps text readable over a busy image without a solid backdrop, though it should be paired with an accessibility check — blend-derived contrast is unpredictable and can fail contrast requirements on some images.
• Combining with clip-path. Blend modes and clip-path masking compose well: clip an element to a shape, then blend it, for effects that would otherwise need an SVG filter.
• Layering with backdrop-filter. backdrop-filter blurs or adjusts what’s behind an element; mix-blend-mode recolors the element itself against that background. Used together they can produce frosted, tinted glass panels.

Performance and gotchas

Blend modes force the browser into a more expensive compositing path, because it can no longer simply stack layers — it has to recompute pixels wherever a blended element overlaps something else. On large areas or animated elements, this can cost frame time; scope isolation: isolate tightly and avoid blending huge, frequently-repainted regions.

Blend modes also behave differently against transparent versus opaque backgrounds. multiply against a fully transparent area does nothing useful, since there’s no color to multiply against — you generally need an opaque or semi-opaque base layer for most blend modes to produce a visible effect. Test against your actual background, not just a solid-color mockup.

The takeaway

mix-blend-mode blends an element with the stacking context behind it; background-blend-mode blends an element’s own background layers with each other and stays contained. Both accept the same blend formulas — multiply and screen for darkening or lightening, overlay and hard-light for contrast, hue/saturation/color/luminosity for selective recoloring. Use isolation: isolate to keep mix-blend-mode from reaching further than intended, and watch compositing cost on large or animated areas.