CSS mix-blend-mode Property

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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’.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    mix-blend-mode: overlay

  • lighten – this replaces the background with the element’s color where the element is lighter.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    mix-blend-mode: lighten

  • darken – this replaces the background with the element’s color where the element is darker.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    mix-blend-mode: darken

  • color-dodge – this lightens the background color to reflect the color of the element.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    Output:

    mix-blend-mode: color-burn

  • hard-light – this applies ‘multiply’ on lighter colors and ‘screen’ on darker colors of the element. This effect is effectively the opposite of ‘overlay’.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>hard-light</h1>
            <div style="mix-blend-mode: hard-light">
            </div>
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

    mix-blend-mode: hard-light

  • soft-light – this applies ‘multiply’ on lighter colors and ‘screen’ on darker colors in the element. The resulting effect is softer than that of ‘overlay’.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>soft-light</h1>
            <div style="mix-blend-mode: soft-light">
            </div>
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

    mix-blend-mode: soft-light

  • difference – this subtracts the absolute difference of the background color and the element’s color.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>difference</h1>
            <div style="mix-blend-mode: difference">
            </div>
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

    mix-blend-mode: difference

  • hue – this applies the hue of the element with the saturation and luminosity of the background.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>hue</h1>
            <div style="mix-blend-mode: hue">
            </div>
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

    mix-blend-mode: hue

  • saturation – this applies the saturation of the element with the hue and luminosity of the background.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>saturation</h1>
            <div style="mix-blend-mode: saturation">
            </div>
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

    mix-blend-mode: saturation

  • color – this applies the hue and saturation of the element with the luminosity of the background.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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</h1>
            <div style="mix-blend-mode: color">
            </div>
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

    mix-blend-mode: color

  • luminosity – this applies the luminosity of the element with the hue and saturation of the background.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>luminosity</h1>
            <div style="mix-blend-mode: luminosity">
            </div>
        </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

    mix-blend-mode: luminosity

  • Browsers that support mix-blend-mode are:

    • Chrome 41.0
    • Firefox 32.0
    • Opera 35.0
    • Safari 8.0


    My Personal Notes arrow_drop_up

    Technical Writer Lets have an update

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    2


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.