”;
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>
”;