background-blend-mode

The background-blend-mode property specifies the blending mode of each background layer, whether it’s a color and/or an image.

Syntax

Example:

div.ex {
  background-image: url('img-one.jpg'), #0000ff;
  background-blend-mode: multiply;
}

Values

normal
Default value. Sets blending mode to normal.

multiply
Sets blending mode to multiply.

screen
Sets blending mode to screen.

overlay
Sets blending mode to overlay.

darken
Sets blending mode to darken.

lighten
Sets blending mode to lighten.

color-dodge
Sets blending mode to color-dodge.

saturation
Sets blending mode to saturation.

color
Sets blending mode to color.

luminosity
Sets blending mode to luminosity.

Browser Compatibilty

Demos

Have a code example of background-blend-mode? Submit a codepen.io demo and we'll showcase it here ↴