Background Blend Mode

Blends an element’s background layers into each other and into its background colour. Check out the MDN for how to use.

Only the background takes part: the element’s own borders, text and children are painted over the result as usual, and nothing behind the element is touched. To blend a whole element into the page instead, use mix-blend-mode.

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

  background-color: #202040;
  background-image:
    linear-gradient(120deg, gold, transparent 70%),
    linear-gradient(20deg, deepskyblue, crimson);
  background-blend-mode: multiply;
}

Values

All sixteen CSS blend functions are supported:

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

plus-lighter is accepted here too, though CSS gives that keyword to mix-blend-mode alone. It is not a blend function: the layer is added to what is under it and the sum is clamped, rather than covering it by its alpha.

A comma-separated list gives one value per background image layer, in the same order as background-image, and repeats if it is shorter than the list of images:

background-image: url(res:noise), linear-gradient(gold, crimson);
background-blend-mode: overlay, normal;

Notes

• Each layer blends with everything below it: the layers already painted, and under those the background-color. The colour is the bottom of the stack, never a blend of its own.
• The blend is weighted by what is underneath, so a layer with nothing behind it comes through untouched — a single image over a transparent colour looks the same in every mode.
• normal costs nothing, and neither does a single blended image over a colour: its backdrop is a value the shader is simply handed.
• Stacking two or more blended image layers is what costs something. The upper layers have to read back what the ones below actually painted, so the element is rendered to its own target first — the same capture filter and mix-blend-mode use.
• Stacking them also contains a descendant’s mix-blend-mode, because the capture is the same one isolation: isolate creates. CSS does not make a blending group for background-blend-mode, so that is a divergence — one a single blended image does not have.
• The built-in pipeline does that read with a GrabPass, which inside the capture already holds this element’s background and nothing else. A scriptable pipeline has none, so the layers below are rendered into a surface of their own and bound for the layer above to sample — one extra render per stacked blending layer, on top of the capture itself. A single blended image over a colour costs neither.