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
Related concepts
<blend-mode>data typebackdrop-filterCSS propertyfilterCSS propertymask-compositeCSS propertybackground-colorCSS propertybackground-imageCSS property- stacking context glossary term
<feBlend>SVG filter primitive<feComposite>SVG filter primitive
Specifications
| Specification |
|---|
| Compositing and Blending Level 2 |
| Compositing and Blending Level 1 |
See also
- Properties in the CSS filter effects module enable applying filters effects, such as blurring and changing color intensity, to images, backgrounds, and borders.
- Compositing And Blending In CSS (2015)
- Editing Images in CSS: Blend Modes (2022)
- web.dev: blend modes (2021)