CSS mix-blend-mode Property
Clash Royale CLAN TAG#URR8PPP <!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
CSS mix-blend-mode Property
❮
Reference
❯
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 »
More "Try it Yourself" examples below.
Definition and Usage
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
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| mix-blend-mode | 41.0 | Not supported | 32.0 | 8.0 | 35.0 |
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
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 |
|---|---|
| normal | This is default. Sets the blending mode to normal |
| multiply | Sets the blending mode to multiply |
| screen | Sets the blending mode to screen |
| overlay | Sets the blending mode to overlay |
| darken | Sets the blending mode to darken |
| lighten | Sets the blending mode to lighten |
| color-dodge | Sets the blending mode to color-dodge |
| color-burn | Sets the blending mode to color-burn |
| difference | Sets the blending mode to difference |
| exclusion | Sets the blending mode to exclusion |
| hue | Sets the blending mode to hue |
| saturation | Sets the blending mode to saturation |
| color | Sets the blending mode to color |
| luminosity | Sets the blending mode to luminosity |
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 »
Related Pages
CSS reference: CSS background-blend-mode Property
❮
Reference
❯