CSS background-blend-mode Property

Definition and Usage

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

See also:

CSS Tutorial:CSS Background

Example

Specify the blending mode of the background image as "lighten" (lighten):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Try it yourself

You can see more TIY examples at the bottom of the page.

CSS Syntax

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Attribute Value

Value Description
normal Default. Set the blending mode to normal.
multiply Set the blending mode to multiply.
screen Set the blending mode to screen.
overlay Set the blending mode to overlay.
darken Set the blending mode to overlay.
lighten Set the blending mode to lighten.
color-dodge Set the blending mode to color-dodge (color lightening).
saturation Set the blending mode to saturation.
color Set the blending mode to color.
luminosity Set the blending mode to luminosity (brightness).

Technical details

Default value: normal
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.backgroundBlendMode="screen"

More examples

Example

Set the blending mode to "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Try it yourself

Example

Set the blending mode to "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Try it yourself

Example

Set the blending mode to "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Try it yourself

Example

Set the blending mode to "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Try it yourself

Example

Set the blending mode to "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Try it yourself

Example

Set the blending mode to "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Try it yourself

Example

Set the blending mode to "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Try it yourself

Example

Set the blending mode to "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Try it yourself

Example

Set the blending mode to "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Try it yourself

Browser Support

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

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1