Example
Specify a blending mode:
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
}
Try it Yourself »
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 | Not supported | 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 | Play it |
|---|---|---|
| normal | This is default. Sets the blending mode to normal | Play it » |
| multiply | Sets the blending mode to multiply | Play it » |
| screen | Sets the blending mode to screen | Play it » |
| overlay | Sets the blending mode to overlay | Play it » |
| darken | Sets the blending mode to darken | Play it » |
| lighten | Sets the blending mode to lighten | Play it » |
| color-dodge | Sets the blending mode to color-dodge | Play it » |
| saturation | Sets the blending mode to saturation | Play it » |
| color | Sets the blending mode to color | Play it » |
| luminosity | Sets the blending mode to luminosity | Play it » |
Related Pages
CSS tutorial: CSS Background