mix-blend-mode

mix-blend-mode controls how an element’s rendered pixels combine with pixels behind it in its stacking context. Background-blend-mode instead blends the element’s own background layers.

Compare normal and multiply

Each blue rectangle overlaps an amber background. Multiply combines color channels and darkens this overlap; normal paints the blue rectangle without that blending calculation. Labels sit outside the blended shapes.

<p>Normal</p>
<div class="stage"><div class="shape" aria-hidden="true"></div></div>
<p>Multiply</p>
<div class="stage"><div class="shape multiply" aria-hidden="true"></div></div>

.stage {
  background: #fbbf24;
  padding: 1rem;
  isolation: isolate;
  margin-block: 0.5rem;
}
.shape {
  width: 100px;
  height: 65px;
  background: #2563eb;
}
.multiply {
  mix-blend-mode: multiply;
}

Keep decorative overlap inside one group

Isolation creates a stacking context for the artwork. The screen blend stays within the group instead of reaching into unrelated page content.

<div class="art" aria-hidden="true">
  <div class="circle blue"></div>
  <div class="circle green"></div>
</div>
<p>Two decorative circles use screen blending.</p>

.art {
  position: relative;
  height: 130px;
  background: #172554;
  isolation: isolate;
}
.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 15px;
  mix-blend-mode: screen;
}
.blue {
  left: 20px;
  background: #2563eb;
}
.green {
  left: 80px;
  background: #0f766e;
}

Values and defaults

The initial value is normal and mix-blend-mode is not inherited. Common modes include multiply, screen, overlay, darken, lighten, difference, exclusion, hue, saturation, color, and luminosity. Screen complements a multiplied pair of complements; it is not simply an inversion of both images. With ordinary normalized color channels, multiply does not lighten and screen does not darken the result.

A non-normal value creates a stacking context. Isolation:isolate creates a boundary for a group; a background color alone is not a substitute for that boundary. Newer plus-lighter and plus-darker values are compositing operations with separate support considerations; check their compatibility rows.

Common mistakes

The result depends on the backdrop. Blended text can become unreadable when a theme or image changes. Keep essential labels outside decorative blending and test actual contrast. This property does not modify the original asset.

Learn background-blend-mode, isolation, and z-index.

Sources and browser support

MDN: mix-blend-mode describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.