background-blend-mode
Sets how an element's multiple background images and background color should blend with each other.
It is documented as part of the Compositing and Blending specification.
Syntax
/* Usage Example */
.hero-banner {
background-image: url(';pattern.png'), linear-gradient(blue, black);
background-blend-mode: overlay;
/* blends the image pattern with the blue/black gradient */
}
/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;background-blend-mode Browser support
Widely available
Since
2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
35+
30+
8+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more