CSS mix-blend-mode Property
Example
Set the image element to blend with the parent container background (yellow), making the image darker:
.container {
background-color: yellow;
padding: 15px;
}
.container img {
mix-blend-mode: darken;
}
Definition and Usage
The mix-blend-mode property describes how an element's content should blend with the content of the element's direct parent and the element's background.
| Inherited: | No. |
|---|---|
| Animatable: | No. About CSS Animations |
| --- | --- |
| 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 |
Syntax
mix-blend-mode: <blend-mode>
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
Multiple values can be separated by commas.
Example
Various blend mode examples:
.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;}