background-blend-mode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.
Try it
background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: hard-light;
background-blend-mode: difference;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element"></div>
</div>
</section>
#example-element {
background-color: green;
background-image: url("/shared-assets/images/examples/balloon.jpg");
width: 250px;
height: 305px;
}
Blending modes should be defined in the same order as the background-image property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
Syntax
css
/* One value */
background-blend-mode: normal;
/* Two values, one per background */
background-blend-mode: darken, luminosity;
/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;
Values
<blend-mode>-
The blending mode to be applied. There can be several values, separated by commas.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
background-blend-mode =
<mix-blend-mode> #
Examples
Basic example
css
.item {
width: 300px;
height: 300px;
background: url("image1.png"), url("image2.png");
background-blend-mode: screen;
}
Try out different blend modes
<div id="div"></div>
<select id="select">
<option>normal</option>
<option>multiply</option>
<option selected>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
#div {
width: 300px;
height: 300px;
background: url("br.png"), url("tr.png");
background-blend-mode: screen;
}
document.getElementById("select").onchange = (event) => {
document.getElementById("div").style.backgroundBlendMode =
document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
[フレーム]
Specifications
| Specification |
|---|
| Compositing and Blending Level 2 # background-blend-mode |
Browser compatibility
Loading...