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_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

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 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 »

Related Pages

CSS tutorial: CSS Background


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.