CSS - mix-blend-mode Property

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>
Advertisements