CSS | background-blend-mode Property

This property defines how the element’s background image should blend with each other and with the element’s background-color.
Syntax:

background-blend-mode: normal|multiply|screen|darken|lighten|
                       color-dodge|saturation|difference|luminosity|overlay;

The values are as follows:

Normal: This is default value. It sets the blending mode to normal.
Syntax:

background-blend-mode: normal;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: normal; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html>

Output:

Multiply:It sets the blending mode to multiply. This leads to a darker image than before.
Syntax:

background-blend-mode: multiply;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: multiply; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Screen:It sets the blending mode to screen. In this mode both image and color is inverted, multiplied and then inverted. again.
Syntax:

background-blend-mode: screen;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: screen; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Darken:It sets the blending mode to darken. In this mode if the background-image is darker than the background-color then the image is replaced, otherwise it is left as it was.
ong>Syntax:

background-blend-mode: screen;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: darken; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Lighten:It sets the blending mode to lighten. In this mode if the background-image is lighter than the background-color then the image is replaced, otherwise it is left as it was.
Syntax:

background-blend-mode: screen;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: lighten; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Color-Dodge:It sets the blending mode to color-dodge. In this mode the background-color is divided by the inverse of the background-image. This is very similar to the screen blend mode.
Syntax:

background-blend-mode: screen;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: color-dodge; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Saturation:It sets the blending mode to lighten. This mode keeps the saturation of the background-image whilst mixing the hue and luminosity of the background-color.
Syntax:

background-blend-mode: screen;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: saturation; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Difference:It sets the blending mode to difference. This mode is the result by subtracting the darker color of the background-image and the background-color from the lightest one. Often the image will have a very high contrast.

Syntax:

background-blend-mode: screen;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: difference; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Luminosity:It sets the blending mode to luminosity. In this mode the luminosity of the top color is preserved whilst using the saturation and hue of the background-color.
Syntax:

background-blend-mode: screen;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: luminosity; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Overlay:It sets the blending mode to overlay. In this mode the background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop.
Syntax:

background-blend-mode: screen;

Example:

<html> 
    <head> 
    <title>background-blend-mode Property</title> 
    <style> 
    #myDIV {  
        width: 400px; 
        height:299px; 
        background-color: green; 
        background-repeat: no-repeat; 
        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"); 
        background-blend-mode: overlay; 
        background-size: contain; 
        } 
</style> 
    </head> 
    <body> 
        <div id="myDIV"></div> 
    </body> 
</html> 

Output:

Supported Browsers: The browser supported by ackgroud-blend-mode property are listed below:

Apple Safari 7.1
Google Chrome 35.0
Firefox 30.0
Opera 22.0
Internet Explorer Not Supported

My Personal Notes

Suggest a Topic

Recommended Posts: