Skip to main content

CSS compositing and blending

The CSS compositing and blending module defines how an element's background layers can be blended together, how an element can be blended with its container, and whether the element must create a new stacking context.

The properties in this CSS module can be used to define the blending mode that should be used, if any, to blend an element's background images and colors into a single background image. This module provides 16 blending modes. You can also define how an element's borders, background, and content, including text, emojis, and images, should be blended with the background of its container.

Compositing and blending in action​

In this example, each box has a border, two striped background images, and a solid color background. The common background for all the boxes contains a pattern of circles. The three boxes in the second row are set to blend with the background of the container.

{{EmbedGHLiveSample("css-examples/modules/compositing.html", '100%', 460)}}

Notice how the background, border, and the content are all impacted as a result of the blending. To see the code for this sample, view the source on GitHub.

Reference​

Properties​

  • {{cssxref("background-blend-mode")}}
  • {{cssxref("isolation")}}
  • {{cssxref("mix-blend-mode")}}
  • {{cssxref("blend-mode")}} data type
  • {{cssxref("backdrop-filter")}} CSS property
  • {{cssxref("filter")}} CSS property
  • {{cssxref("mask-composite")}} CSS property
  • {{cssxref("background-color")}} CSS property
  • {{cssxref("background-image")}} CSS property
  • {{glossary("stacking context")}} glossary term
  • {{ SVGElement("feBlend")}} SVG filter primitive
  • {{ SVGElement("feComposite")}} SVG filter primitive

Specifications​

See also​