CSS background-blend-mode Property
In CSS, the background-blend-mode is used to define the blending mode of each background layer. The property specifies how the element's background images should interact with one another and with the element's background color.
Syntax
Property Values
| Value | Description |
|---|---|
| normal | This is the default setting. Normalizes the blending mode. |
| multiply | Changes the blending mode to multiply. |
| screen | Screen is the blending mode that is selected. |
| overlay | Overlays the blending mode. |
| darken | Darkens the blending mode. |
| lighten | Lightens the blending mode. |
| color-dodge | Color-dodge is the blending mode that is selected. |
| saturation | Saturation is set as the blending mode. |
| color | Colorizes the blending mode. |
| luminosity | The blending mode is changed to luminosity. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 30.0 | 7.1 | 79.0 | 22.0 |