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

/* 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

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

Try out different blend modes

Specifications

Specification
Compositing and Blending Level 2 # background-blend-mode

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`background-blend-mode`	35	79	30	22	8	35	30	22	8	3.0	37