pelicin › web › CSS

Blend Mode

The background-blend-mode property sets how an element's background (i.e. background-image, background-color) should blend with each other.

The mix-blend-mode property sets how an element's content should blend with its background and its parents' content.

CSS Properties

background-blend-mode

Sets how an element's background should blend with each other. Note that there could be more than one "background" if you specify more than one images in background-image.

Specify comma-separated list of blend mode, in the same order as background-image. (Truncation/repetition of blend mode will occur if the numbers don't match.)

<div id="background-blend-mode-example">
  Hello!
</div>
/* Background credit: https://www.medyathick.com/ornek-sayfa/abstract-colors-png-transparent-image/ */
#background-blend-mode-example {
  color: white;
  display: inline-block;
  padding: 50px 100px;
  /* Note that the 2nd background becomes reddish, */
  /* and the 1st background blends normally */
  background-image: url('/res/others/abstract-colors-transparent.png'), url('/res/unsplash/andrew-ridley-jR4Zf-riEjI-unsplash.jpg');
  background-color: red;
  background-blend-mode: normal, multiply;
  background-size: cover;
}
| LIVE PREVIEW
Hello!

mix-blend-mode

Sets how an element's content should blend with its background and its parents' content ("mixes through multiple layer of elements").

Specify a blend mode, e.g. normal or multiply.

<div id="mix-blend-mode-example">
  <div class="inner">
    The whole content blends!
  </div>
</div>
#mix-blend-mode-example {
  padding: 10px;
  background-color: red;
}
#mix-blend-mode-example .inner {
  padding: 10px;
  color: yellow;
  background-color: blue;
  mix-blend-mode: difference;
}
| LIVE PREVIEW
The whole content blends!

References