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

Example

Preview

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