CSS background-blend-mode Property
Example
Specify the blending mode of a background-image to be "lighten":
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
Try it Yourself »
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
More "Try it Yourself" examples below.
Definition and Usage
The background-blend-mode property defines the blending mode of each
background layer (color and/or image).
| Default value: | normal |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.backgroundBlendMode="screen" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
CSS Syntax
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Property Values
| Value | Description | Demo |
|---|---|---|
| normal | This is default. Sets the blending mode to normal | Demo ❯ |
| multiply | Sets the blending mode to multiply | Demo ❯ |
| screen | Sets the blending mode to screen | Demo ❯ |
| overlay | Sets the blending mode to overlay | Demo ❯ |
| darken | Sets the blending mode to darken | Demo ❯ |
| lighten | Sets the blending mode to lighten | Demo ❯ |
| color-dodge | Sets the blending mode to color-dodge | Demo ❯ |
| saturation | Sets the blending mode to saturation | Demo ❯ |
| color | Sets the blending mode to color | Demo ❯ |
| luminosity | Sets the blending mode to luminosity | Demo ❯ |
More Examples
Example
Specify the blending mode to be "multiply":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Example
Specify the blending mode to be "screen":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
Example
Specify the blending mode to be "overlay":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
Example
Specify the blending mode to be "darken":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
Example
Specify the blending mode to be "color-dodge":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
Example
Specify the blending mode to be "saturation":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
Example
Specify the blending mode to be "color":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
Example
Specify the blending mode to be "luminosity":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Example
Specify the blending mode to be "normal":
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
Try it Yourself »
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
Related Pages
CSS tutorial: CSS Background