CSS background-blend-mode Property

Example

Specify the blending mode of a background-image to be "lighten":

div {
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: screen;
}

Definition and Usage

The background-blend-mode property defines the blending mode of each background layer (color and/or image).

Multiple Background Images will blend together to create a effect of single background image.

Default value:	normal
Inherited:	no
Animatable:	no.
Version:	CSS3
JavaScript syntax:	object.style.backgroundBlendMode="screen"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which background-blend-mode is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background-blend-mode	35.0	79.0	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	Demo
normal	This is default. Sets the blending mode to normal
multiply	Sets the blending mode to multiply
screen	Sets the blending mode to screen
overlay	Sets the blending mode to overlay
darken	Sets the blending mode to darken
lighten	Sets the blending mode to lighten
color-dodge	Sets the blending mode to color-dodge
saturation	Sets the blending mode to saturation
color	Sets the blending mode to color
luminosity	Sets the blending mode to luminosity

More Examples

Example

Specify the blending mode to be "multiply":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: multiply;
}

Example

Specify the blending mode to be "screen":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: screen;
}

Example

Specify the blending mode to be "overlay":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: overlay;
}

Example

Specify the blending mode to be "darken":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: darken;
}

Example

Specify the blending mode to be "color-dodge":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: color-dodge;
}

Example

Specify the blending mode to be "saturation":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: saturation;
}

Example

Specify the blending mode to be "color":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: color;
}

Example

Specify the blending mode to be "luminosity":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: luminosity;
}

Example

Specify the blending mode to be "normal":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_heart.png"), url("blue.jpg");
  background-blend-mode: normal;
}