CSS background-blend-mode Property

❮ Previous Complete CSS Reference Next ❯

Example

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

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

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

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

Show demo ❯

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

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

Property Values

Value	Description	Demo
normal	This is default. Sets the blending mode to normal	Demo ❯
multiply	Sets the blending mode to multiply	Demo ❯
screen	Sets the blending mode to screen	Demo ❯
overlay	Sets the blending mode to overlay	Demo ❯
darken	Sets the blending mode to darken	Demo ❯
lighten	Sets the blending mode to lighten	Demo ❯
color-dodge	Sets the blending mode to color-dodge	Demo ❯
saturation	Sets the blending mode to saturation	Demo ❯
color	Sets the blending mode to color	Demo ❯
luminosity	Sets the blending mode to luminosity	Demo ❯

More Examples

Example

Specify the blending mode to be "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

Specify the blending mode to be "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

Specify the blending mode to be "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

Specify the blending mode to be "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

Specify the blending mode to be "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

Specify the blending mode to be "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

Specify the blending mode to be "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

Specify the blending mode to be "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

Specify the blending mode to be "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 »

CSS tutorial: CSS Background

❮ Previous Complete CSS Reference Next ❯