CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.
mix-blend-mode
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>
P
﻿
﻿
﻿
﻿
﻿
﻿
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

mix-blend-mode

Possible Values

Applies To

Syntax

CSS mix-blend-mode - Different mix-blend-mode Values

CSS mix-blend-mode - With HTML

CSS mix-blend-mode - With SVG

CSS mix-blend-mode - With Text
