CSS - background-blend-mode Property

The background-blend-mode CSS property is used in determining how an element's background images blend with each other or with the background color.

It is important to define the blending modes in the same order as that of background-image property, because if the length of the list of blending modes' and background images' is not equal, it will be either repeated and/or truncated till the time lengths match.

Possible Values

  • <blend-mode>: Blending mode to be applied, which can be normal, darken and/or luminosity, etc.

There can be several values passed, separated by commas.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroudBlendMode = "normal | darken | luminosity | darken, luminosity"

CSS background-blend-mode - With Different Blend Modes

The following example demonstrates how the background images interact with each other using different background blend modes −

<html>
<head>
<style> 
   div {
      width: 100px;
      height: 100px;
      background: url('images/tree.jpg'), url('images/border.png');
      padding: 10px;
      margin: 5px;
      display: inline-block;
      font-weight: 800;
   }
</style>
</head>
<body>
   <div style="background-blend-mode: saturation;">saturation</div>
   <div style="background-blend-mode: luminosity;">luminosity</div>
   <div style="background-blend-mode: darken;">darken</div> 
   <div style="background-blend-mode: hue;">hue</div>  
   <div style="background-blend-mode: normal;">normal</div>  
   <div style="background-blend-mode: overlay;">overlay</div>  
</body>
</html>
Advertisements