Skip to content
Related Articles

Related Articles

CSS mix-blend-mode Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 07 Jun, 2022
View Discussion
Improve Article
Save Article

The CSS mix-blend-mode property of an element is used to specify the blending of an element’s background with the element’s parent. 

Syntax:

 mix-blend-mode: normal | multiply | exclusion 
            | overlay | lighten | darken 
            | color-dodge | color-burn 
            | hard-light | soft-light 
            | difference | hue 
            | saturation | color | screen 
            | luminosity

Values:

  • initial – the default setting, this does not set a blend mode.
  • inherit – this inherits the blend mode of its parent element.
  • unset – this removes the current blend mode from the element.
  • normal – no blending is applied on the element. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>normal</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: normal">
        </div>
    </div>
</body>
</html>

  • Output:

 mix-blend-mode: normal

  • multiply – this multiplies the element’s color with the background. The resulting color is always as dark as the background. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>multiply</h1>
         
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: multiply">
        </div>
    </div>
</body>
</html>

  • Output:

 mix-blend-mode: multiply

  • screen – this multiplies the element’s color with the background and then complements the result. The resulting color is always as bright as one of the blended layers. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>screen</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: screen">
        </div>
    </div>
</body>
</html>

  • Output: 

mix-blend-mode: screen

  • exclusion – this subtracts the darker of two colors from the lightest color of the element. The result is similar to ‘difference’ but with a lower contrast. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>exclusion</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: exclusion">
        </div>
    </div>
</body>
</html>

  • Output: mix-blend-mode: exclusion
  • overlay – this applies ‘multiply’ on lighter colors and ‘screen’ on darker colors in the element. The effect is effectively the opposite of ‘hard-light’. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>overlay</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: overlay">
        </div>
    </div>
</body>
</html>

  • Output: mix-blend-mode: overlay
  • lighten – this replaces the background with the element’s color where the element is lighter. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>lighten</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: lighten">
        </div>
    </div>
</body>
</html>

  • Output: mix-blend-mode: lighten
  • darken – this replaces the background with the element’s color where the element is darker. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>darken</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: darken">
        </div>
    </div>
</body>
</html>

  • Output: mix-blend-mode: darken
  • color-dodge – this lightens the background color to reflect the color of the element. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>color-dodge</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: color-dodge">
        </div>
    </div>
</body>
</html>

  • Output: mix-blend-mode: color-dodge
  • color-burn – this darkens the background color to reflect the natural colors of the image. The result has increased amount of contrast between the element and the background. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>color-burn</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: color-burn">
            <img src="https:/<li><b>Normal:</b>
 
<strong>Syntax:</strong>
<pre>mix-blend-mode: normal</pre>

<ul > <li > Chrome 41.0 </li > <li > Edge 79.0 </li > <li > Firefox 32.0 </li > <li > Opera 28.0 </li > <li > Safari 8.0 </li > <li > Internet Explorer not supported </li > </ul >


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!