Skip to content
Related Articles

Related Articles

Improve Article

CSS | background-blend-mode Property

  • Last Updated : 29 Jun, 2021

The background-blend-mode 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;

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

  • Syntax: 
     
background-blend-mode: normal;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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. 
 

  • Syntax: 
     
background-blend-mode: darken;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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: lighten;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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: color-dodge;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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: saturation;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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 very high contrast.
 

  • Syntax: 
     
background-blend-mode: difference;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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: luminosity;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            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: Overlay;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image:
            background-blend-mode: overlay;
            background-size: contain;
        }
    </style>
</head>
 
<body>
    <div id="myDIV"></div>
</body>
 
</html>
  • Output:
     

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

  • Google Chrome 35.0
  • Firefox 30.0
  • Opera 22.0
  • Apple Safari 7.1

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :