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.

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

Specifications

Specification
Compositing and Blending Level 2
Compositing and Blending Level 1

See also