background-blend-mode

defines how the background is blended element is blended

Note: this only works if the element has multiple background layers

For the demo's below i use the following background images, you can see how the different blend modes effect each image as they are overlayed. 

Property Variable Name

background-blend-mode

Available Values for background-blend-mode

normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity

Example using background-blend-mode normal

Here is an example using background-blend-mode:normal;

Code

<style>
.demo-box-1 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:normal;
}
</style>
<h2>Example using background-blend-mode normal</h2>
<p>Here is an example using <code>background-blend-mode:normal;</code></p>
<div class='demo-box-1'>
</div>

Example using background-blend-mode multiply

Here is an example using background-blend-mode:multiply;

Code

<style>
.demo-box-2 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:multiply;
}
</style>
<h2>Example using background-blend-mode multiply</h2>
<p>Here is an example using <code>background-blend-mode:multiply;</code></p>
<div class='demo-box-2'>
</div>

Example using background-blend-mode screen

Here is an example using background-blend-mode:screen;

Code

<style>
.demo-box-3 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:screen;
}
</style>
<h2>Example using background-blend-mode screen</h2>
<p>Here is an example using <code>background-blend-mode:screen;</code></p>
<div class='demo-box-3'>
</div>

Example using background-blend-mode overlay

Here is an example using background-blend-mode:overlay;

Code

<style>
.demo-box-4 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:overlay;
}
</style>
<h2>Example using background-blend-mode overlay</h2>
<p>Here is an example using <code>background-blend-mode:overlay;</code></p>
<div class='demo-box-4'>
</div>

Example using background-blend-mode darken

Here is an example using background-blend-mode:darken;

Code

<style>
.demo-box-5 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:darken;
}
</style>
<h2>Example using background-blend-mode darken</h2>
<p>Here is an example using <code>background-blend-mode:darken;</code></p>
<div class='demo-box-5'>
</div>

Example using background-blend-mode lighten

Here is an example using background-blend-mode:lighten;

Code

<style>
.demo-box-6 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:lighten;
}
</style>
<h2>Example using background-blend-mode lighten</h2>
<p>Here is an example using <code>background-blend-mode:lighten;</code></p>
<div class='demo-box-6'>
</div>

Example using background-blend-mode color-dodge

Here is an example using background-blend-mode:color-dodge;

Code

<style>
.demo-box-7 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:color-dodge;
}
</style>
<h2>Example using background-blend-mode color-dodge</h2>
<p>Here is an example using <code>background-blend-mode:color-dodge;</code></p>
<div class='demo-box-7'>
</div>

Example using background-blend-mode saturation

Here is an example using background-blend-mode:saturation;

Code

<style>
.demo-box-8 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:saturation;
}
</style>
<h2>Example using background-blend-mode saturation</h2>
<p>Here is an example using <code>background-blend-mode:saturation;</code></p>
<div class='demo-box-8'>
</div>

Example using background-blend-mode color

Here is an example using background-blend-mode:color;

Code

<style>
.demo-box-9 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:color;
}
</style>
<h2>Example using background-blend-mode color</h2>
<p>Here is an example using <code>background-blend-mode:color;</code></p>
<div class='demo-box-9'>
</div>

Example using background-blend-mode luminosity

Here is an example using background-blend-mode:luminosity;

Code

<style>
.demo-box-10 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-blend-mode:luminosity;
}
</style>
<h2>Example using background-blend-mode luminosity</h2>
<p>Here is an example using <code>background-blend-mode:luminosity;</code></p>
<div class='demo-box-10'>
</div>