CSS mix-blend-mode Property
The CSS mix-blend-mode property of an element specifies how the element's background is blended with the element's parent.
Syntax
Property Values
| Value | Description |
|---|---|
| normal | This is the default setting. Normalizes the blending mode. |
| multiply | The blending mode is changed to multiply. |
| screen | Screen is the blending mode that is selected. |
| overlay | Overlay is the blending mode that is selected. |
| darken | The blending mode is changed to darken. |
| lighten | The blending mode is changed to lighten. |
| color-dodge | Color-dodge is the blending mode that is selected. |
| color-burn | Color-burn is the blending mode that is selected. |
| difference | The blending mode is different. |
| exclusion | Exclusion is the blending mode that is selected. |
| hue | The blending mode is changed to hue. |
| saturation | Saturation is set as the blending mode. |
| color | Colorizes the blending mode. |
| luminosity | The blending mode is changed to luminosity. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| mix-blend-mode | 41.0 | 32.0 | 8.0 | 79.0 | 35.0 |