CSSmix-blend-mode Property
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;
}
Try it Yourself »background-color: red;
}
.container img {
mix-blend-mode: darken;
}
More "Try it Yourself" examples below.
Definition and Usage
Themix-blend-mode property specifies how an element's content should blend with its direct parent background.
| Default value: | normal |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| JavaScript syntax: | object.style.mixBlendMode = "darken"Try it |
Browser Support
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: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|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 ❯ |
| 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
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 ».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;}
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 »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;
}
Related Pages
CSS reference:CSS background-blend-mode Property
