Mix Blend Mode

Blends an element into whatever is painted behind it. Check out the MDN for how to use.

The element is rendered off screen and blended as one image, so its background, borders, text and children go into the backdrop together rather than each blending against the ones before it — as on the web, and the same capture filter uses. When both are set the filter runs first and its result is what blends.

.stack {
  width: 300px;
  height: 200px;
  margin-top: 16px;
}

.backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 200px;
  background-image: linear-gradient(120deg, gold, deepskyblue);
}

.blob {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  mix-blend-mode: multiply;
}

.one { left: 40px; top: 35px; background-color: crimson; }
.two { left: 130px; top: 35px; background-color: seagreen; }

Values

All sixteen CSS blend functions are supported, and they take the same values as background-blend-mode:

normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

plus-lighter is supported as well. It is not a blend function: rather than covering the backdrop by its alpha, the element is added to it and the sum is clamped, which is how two overlapping glows brighten each other. screen lightens the same way but tapers off (a + b - ab), so it never clips; plus-lighter does. The element’s own opacity scales what is added, not the result.

Notes

• The backdrop is read from the frame as it stands when the element is drawn, so blending only sees what is behind the element — anything drawn after it is unaffected, as on the web.
• normal costs nothing: an element only pays for the offscreen capture and the backdrop read once it actually blends.
• Blending is confined to the nearest blending group above it, which is what isolation: isolate creates. A filter on an ancestor makes one too, since it is the same capture.
• The built-in pipeline reads the backdrop with a GrabPass. A scriptable pipeline has none, so it is rendered instead — the camera draws the frame again with the element and everything after it left out, once per blending element. Inside a blending group it is that group’s own camera and its own capture, which is what keeps the blend contained. See backdrop-filter for what that costs and when it cannot be done at all.