CSS background-blend-mode property specifies how different background images/colors should blend with each other when applied on a single element.
In the below example, we have set the background-blend-mode to luminosity. Try it out to see how it looks:
Example:
body{
background-image: url('images/tree-transparent.png'), url('images/sand.jpg');
background-repeat: no-repeat;
background-blend-mode: luminosity;
}
CSS Syntax
The background-blend-mode property has the following syntax:
background-blend-mode: normal|luminosity|multiply|screen|overlay|darken|lighten|hard-light|soft-light|color|color-dodge|color-burn|difference|exclusion|hue|saturation;
Property Values
The background-blend-mode property accepts the following values:
| normal | Specifies a normal blending mode. This is the default value. |
| luminosity | Specifies a luminosity blending mode. |
| multiply | Specifies a multiply blending mode. |
| screen | Specifies a screen blending mode. |
| overlay | Specifies an overlay blending mode. |
| darken | Specifies a darken blending mode. |
| lighten | Specifies a lighten blending mode. |
| hard-light | Specifies a hard-light blending mode. |
| soft-light | Specifies a soft-light blending mode. |
| color | Specifies a color blending mode. |
| color-dodge | Specifies a color-dodge blending mode. |
| color-burn | Specifies a color-burn blending mode. |
| difference | Specifies a difference blending mode. |
| exclusion | Specifies an exclusion blending mode. |
| hue | Specifies a hue blending mode. |
| saturation | Specifies a saturation blending mode. |
General Info
| Default Value | normal |
| Inherited | No |
| JavaScript Usage | element.style.backgroundBlendMode = “luminosity” |
Related Pages
CSS Tutorial: CSS Background
