CSS mix-blend-mode property determines how the content of an element should blend with the content of its parent and the element’s background.
Possible Values
- <blend-mode> − Define the blending mode to be used.
- plus-darker − Blending with the plus-darker compositing operator.
- plus-lighter − Blending with the plus-lighter compositing operator. Cross-fade effects are useful because they eliminate undesired blinking when two overlying items animate their opacity in opposite directions.
Applies To
All elements.
Syntax
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;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;
CSS mix-blend-mode – Different mix-blend-mode Values
The following example demonstrates the effect of different mix-blend-mode with background box and a front box −
<html><head><style>
.box {
width: 200px;
height: 150px;
position: relative;
margin: 10px;
padding: 5px;
border: 2px solid black;
}
.background-box {
width: 100px;
height: 100px;
background-color: blue;
}
.front-box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 40px;
left: 30px;
}
.mix-blend-mode-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.mode-container {
display: flex;
flex-direction: column;
margin-right: 20px;
}
h3 {
margin-bottom: 10px;
}
.normal-mode {
mix-blend-mode: normal;
}
.multiply-mode {
mix-blend-mode: multiply;
}
.screen-mode {
mix-blend-mode: screen;
}
.darken-mode {
mix-blend-mode: darken;
}
.lighten-mode {
mix-blend-mode: lighten;
}
.overlay-mode {
mix-blend-mode: overlay;
}
.color-dodge-mode {
mix-blend-mode: color-dodge;
}
.back-burn {
background-color: orange;
}
.color-burn-mode {
background-color: blue;
mix-blend-mode: color-burn;
}
.hard-light-mode {
mix-blend-mode: hard-light;
}
.back-hard {
background-color: red;
}
.soft-light-mode {
background-color: blue;
mix-blend-mode: soft-light;
}
.difference-mode {
background-color: blue;
mix-blend-mode: difference;
}
.exclusion-mode {
background-color: blue;
mix-blend-mode: difference;
}
.hue-mode {
background-color: blue;
mix-blend-mode: hue;
}
.saturation-mode {
blend-mode: saturation;
}
.color-mode {
background-color: blue;
mix-blend-mode: hue;
}
.luminosity-mode {
background-color: blue;
mix-blend-mode: luminosity;
}
.plus-darker-mode {
background-color: blue;
mix-blend-mode: plus-darker;
}
.plus-lighter-mode {
background-color: blue;
mix-blend-mode: plus-lighter;
}
</style></head><body><div class="mix-blend-mode-box"><div class="mode-container"><h3>mix-blend-mode: normal</h3><div class="box"><div class="background-box"></div><div class="front-box normal-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: multiply</h3><div class="box"><div class="background-box"></div><div class="front-box multiply-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: screen</h3><div class="box"><div class="background-box"></div><div class="front-box screen-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: darken</h3><div class="box"><div class="background-box"></div><div class="front-box darken-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: lighten</h3><div class="box"><div class="background-box"></div><div class="front-box lighten-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: overlay</h3><div class="box"><div class="background-box"></div><div class="front-box overlay-mode"></div></div></div></div><div class="mix-blend-mode-box"><div class="mode-container"><h3>mix-blend-mode: color-dodge</h3><div class="box"><div class="background-box"></div><div class="front-box color-dodge-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: color-burn</h3><div class="box"><div class="background-box back-burn"></div><div class="front-box color-burn-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: hard-light</h3><div class="box"><div class="background-box"></div><div class="front-box hard-light-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: soft-light</h3><div class="box"><div class="background-box back-hard"></div><div class="front-box soft-light-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: difference</h3><div class="box"><div class="background-box back-hard"></div><div class="front-box difference-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: exclusion</h3><div class="box"><div class="background-box back-hard"></div><div class="front-box exclusion-mode"></div></div></div></div><div class="mix-blend-mode-box"><div class="mode-container"><h3>mix-blend-mode: hue</h3><div class="box"><div class="background-box back-burn"></div><div class="front-box hue-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: saturation</h3><div class="box"><div class="background-box"></div><div class="front-box saturation-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: color</h3><div class="box"><div class="background-box back-burn"></div><div class="front-box color-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: luminosity</h3><div class="box"><div class="background-box back-burn"></div><div class="front-box luminosity-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: plus-darker</h3><div class="box"><div class="background-box back-burn"></div><div class="front-box plus-darker-mode"></div></div></div><div class="mode-container"><h3>mix-blend-mode: plus-lighter</h3><div class="box"><div class="background-box back-burn"></div><div class="front-box plus-lighter-mode"></div></div></div></div></body></html>CSS mix-blend-mode – With HTML
The following example demonstrates how circle colors are blended on a screen blending mode −
<html><head><style>
.box {
width: 100px;
height: 100px;
border-radius: 50%;
mix-blend-mode: screen;
position: absolute;
}
.box1 {
background: blueviolet;
}
.box2 {
background: lightcoral;
left: 50px;
}
.box3 {
background: green;
left: 30px;
top: 50px;
}
.union {
isolation: isolate;
position: relative;
}
</style></head><body><div class="union"><div class="box box1"></div><div class="box box2"></div><div class="box box3"></div></div></body></html>CSS mix-blend-mode – With SVG
The following example demonstrates the mix-blend-mode of the colors based on a screen blending mode with SVG −
<html><head><style>
ellipse {
mix-blend-mode: screen;
}
.union {
isolation: isolate;
}
</style></head><body><svg><g class="union"><ellipse cx="50" cy="40" rx="50" ry="30" fill="blueviolet" /><ellipse cx="90" cy="40" rx="50" ry="30" fill="lightcoral" /><ellipse cx="70" cy="70" rx="50" ry="30" fill="green" /></g></svg></body></html>CSS mix-blend-mode – With Text
The following example demonstrates the effect of different mix-blend-mode on the text within a green-colored container −
<html><head><style>
.container {
background-color: green;
}
p {
font: italic normal bold 30px Arial, sans-serif;;
color: orange;
padding: 10px;
margin: 0;
}
.multiply-mode {
mix-blend-mode: multiply;
}
.screen-mode {
mix-blend-mode: screen;
}
.hard-light-mode {
mix-blend-mode: difference;
}
</style></head><body><div class="container"><p>Without blend mode</p><p class="multiply-mode">mix-blend-mode: multiply</p><p class="screen-mode">mix-blend-mode: screen</p><p class="hard-light-mode">mix-blend-mode: difference</p></div></body></html>
Leave a Reply