The background-blend-mode property blends background layers together.
This property may include multiple images to be blended.
Background images can also blend with a background color.
Two background images blended with background-blend-mode set to multiply.
<style>
.bg-multiply {
max-width: 400px;
height: 300px;
background-repeat: no-repeat;
background-image: url("/img/css/vangogh.jpg"),
url("/img/css/the-sower.jpg");
background-blend-mode: multiply;
}
</style>
<div class="bg-multiply"></div>
background-blend-mode: normal | multiply | screen | overlay | darken |
lighten | color-dodge | saturation | color |
luminosity;
| Value | Description |
|---|---|
| normal | Default. Normal blending mode. |
| multiply | Multiply blending mode. |
| screen | Screen blending mode. |
| overlay | Overlay blending mode. |
| darken | Darken blending mode. |
| lighten | Lighten blending mode. |
| color-dodge | Color dodge blending mode. |
| saturation | Saturation blending mode. |
| color | Color blending mode. |
| luminosity | Luminosity blending mode. |
Click the buttons to see the different background-blend-mode values.
<style>
.bg-blend-example {
max-width: 400px;
height: 300px;
background-repeat: no-repeat;
background-image: url("/img/css/vangogh.jpg"),
url("/img/css/the-sower.jpg");
background-blend-mode: darken;
}
</style>
<div class="bg-blend-example"></div>
This table shows when background-blend-mode support started for each browser.
 Chrome
|
35.0 | May 2014 |
 Firefox
|
30.0 | Jun 2014 |
 IE/Edge
|
Not supported | |
 Opera
|
22.0 | Jun 2013 |
 Safari
|
7.1 | Sep 2014 |
