mix-blend-mode

Example

A container with a red background and an image that blends with the red container (darken):

.container {
background-color: red;
}

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

Definition mix-blend-mode

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

Default value:	normal
Inherited:	no
Animatable:	no. Read about animatable
JavaScript syntax:	object.style.mixBlendMode = "darken" Try it

Browser Support mix-blend-mode

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

Property
mix-blend-mode	41.0	79.0	32.0	8.0	35.0

CSS Syntax mix-blend-mode

Property Values mix-blend-mode

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 ❯
color-burn	Sets the blending mode to color-burn	Demo ❯
difference	Sets the blending mode to difference	Demo ❯
exclusion	Sets the blending mode to exclusion	Demo ❯
hue	Sets the blending mode to hue	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 mix-blend-mode

Example

A demonstration of 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

Using mix-blend-mode to create a responsive cutout/knockout 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 »