background-blend-mode

background-blend-mode determines how an element’s background image layers blend with one another and with its background color. It does not blend the text or the whole element with neighboring content.

Compare normal with multiply

The same blue image sits over the same pale amber color. Normal paints the opaque blue layer; multiply combines its channels with the amber underneath, changing the result.

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

.sample {
  height: 90px;
  margin-block: 0.5rem;
  background-color: #fde68a;
  background-image: linear-gradient(#60a5fa, #60a5fa);
}
.multiply {
  background-blend-mode: multiply;
}

Keep readable content above blended decoration

The background uses two image layers with explicit modes. The text sits on a solid white surface, so the decorative blend does not determine its contrast.

<div class="note">
  <p>Blend the decoration, keep the explanation readable.</p>
</div>

.note {
  padding: 1rem;
  background-color: #eff6ff;
  background-image:
    linear-gradient(45deg, #60a5fa, #99f6e4),
    repeating-linear-gradient(90deg, white 0 16px, #bfdbfe 16px 32px);
  background-blend-mode: multiply, normal;
}
p {
  margin: 0;
  padding: 0.75rem;
  background: white;
  color: #172554;
}

Values and defaults

The initial value is normal and the property is not inherited. Multiply, screen, overlay, darken, lighten, difference, and other blend modes use defined color blending formulas. They are blend modes, not Porter-Duff compositing operators.

A comma-separated list associates modes with image layers from first to last. Background layers blend within the element’s background, rather than with content behind the entire element. The background shorthand does not reset this separate property.

Common mistakes

A single opaque image with normal blending conceals lower layers. A blend can alter contrast in unexpected places, so check the final pixels and retain a readable fallback color. Background blending does not edit the source file.

Use mix-blend-mode for foreground/backdrop blending and filter for filter effects. Learn background-image for image-layer ordering.

Sources and browser support

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