CSS mix-blend-mode property

Definition and Usage

The mix-blend-mode property specifies how the content of an element should blend with the background of its direct parent.

See also:

CSS Reference Manual:CSS background-blend-mode Property

Example

A container with a red background and an image that blends with this red container (dark):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

Try it yourself

More TIY examples can be found at the bottom of the page.

CSS Syntax

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Property value

Value Description
normal This is the default value. Set the mix mode to normal.
multiply Set the mix mode to multiply.
screen Set the mix mode to screen.
overlay Set the mix mode to overlay.
darken Set the mix mode to darken.
lighten Set the mix mode to lighten.
color-dodge Set the mix mode to color-dodge.
color-burn Set the mix mode to color-burn.
difference Set the mix mode to difference.
exclusion Set the mix mode to exclusion.
hue Set the mix mode to hue.
saturation Set the mix mode to saturation.
color Set the mix mode to color.
luminosity Set the mix mode to luminosity.

Technical details

Default value: normal
Inheritance: No
Animation production: Not supported. Please refer to:Animation-related properties.
JavaScript Syntax: object.style.mixBlendMode = "darken"

More examples

Example

Demonstrate all values:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Try it yourself

Example

Use mix-blend-mode to create responsive cutout/knockout text (clipped text):

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Try it yourself

Browser Support

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

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0