CSS mixblendmode Property (original) (raw)

CSS mix-blend-mode Property

Last Updated : 28 Aug, 2024

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 `

GeeksForGeeks

    <!-- mix-blend-mode Property -->
    <div style="mix-blend-mode: normal">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
    </div>
</div>

`

• **Output:

• **multiply - this multiplies the element's color with the background. The resulting color is always as dark as the background. html `

GeeksForGeeks

    <!-- mix-blend-mode Property -->
    <div style="mix-blend-mode: multiply">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
    </div>
</div>

`

• **Output:

• **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 `

GeeksForGeeks

    <!-- mix-blend-mode Property -->
    <div style="mix-blend-mode: screen">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
    </div>
</div>

`

• **Output:

• **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 `

GeeksForGeeks

    <!-- mix-blend-mode Property -->
    <div style="mix-blend-mode: exclusion">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
    </div>
</div>

`

• **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 `

GeeksForGeeks

    <!-- mix-blend-mode Property -->
    <div style="mix-blend-mode: overlay">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
    </div>
</div>

`

• **Output:
• **lighten - this replaces the background with the element's color where the element is lighter. html `

GeeksForGeeks

    <!-- mix-blend-mode Property -->
    <div style="mix-blend-mode: lighten">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
    </div>
</div>

`

• **Output:
• **darken - this replaces the background with the element's color where the element is darker. html `

GeeksForGeeks

    <!-- mix-blend-mode Property -->
    <div style="mix-blend-mode: darken">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
    </div>
</div>

`

• **Output:
• **color-dodge - this lightens the background color to reflect the color of the element. html `

GeeksForGeeks

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

`

• **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 `

GeeksForGeeks

    <!-- mix-blend-mode Property -->
    <div style="mix-blend-mode: color-burn">
        <img src="https:/<li><b>Normal:</b>

mix-blend-mode: normal