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 to 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">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </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">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </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">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </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">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>

Output:
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">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>

Output:
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">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>

Output:
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">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>

Output:
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">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>

Output:
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>

CSS mix-blend-mode Property

Explore