By /

CSS Background Blend Mode Property

CSS background blend mode property controls how an element’s background images blend with each other and with the element’s background color. It’s like the blending modes you find in image editing software like Photoshop.

Purpose:

    • background-blend-mode allows you to create visual effects by blending multiple background layers.
    • It affects how the colors of the background images and the background color interact.

Syntax:

element {
background-blend-mode: blend-mode-value;
}
  • element: The HTML element you want to apply the blend mode to.
  • blend-mode-value: The blending mode you want to use.

Common Blend Mode Values: 

    • normal: (Default) No blending occurs. The top layer completely covers the bottom layer.
    • multiply: Multiplies the color values of the layers. Darker areas become darker, and lighter areas become darker.
    • screen: Inverts the color values, multiplies them, and then inverts the result. Lighter areas become lighter.
    • overlay: Combines multiply and screen depending on the base layer’s color values.
    • darken: Keeps the darker color value from each layer.
    • lighten: Keeps the lighter color value from each layer.
    • color-dodge: Brightens the base layer color to reflect the blend layer color.
    • color-burn: Darkens the base layer color to reflect the blend layer color.
    • hard-light: Combines screen and multiply modes, depending on the source color value.
    • soft-light: Similar to hard-light but produces a softer effect.
    • difference: Subtracts the color values of the layers.
    • exclusion: Similar to difference but with lower contrast.
    • hue: Uses the hue of the top layer with the saturation and luminosity of the bottom layer.
    • saturation: Uses the saturation of the top layer with the hue and luminosity of the bottom layer.
    • color: Uses the hue and saturation of the top layer with the luminosity of the bottom layer.
    • luminosity: Uses the luminosity of the top layer with the hue and saturation of the bottom layer.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Background Blend Mode Example</title>
      <style>
         .blend-box {
            width: 300px;
            height: 200px;
            background-image: url('https://placekitten.com/200/150'), url('https://placekitten.com/150/200');
            background-size: cover;
            background-repeat: no-repeat;
            background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
            margin: 20px;
          }
         .multiply {
            background-blend-mode: multiply;
          }
         .screen {
            background-blend-mode: screen;
          }
         .overlay {
            background-blend-mode: overlay;
          }
       </style>
    </head>
    <body>
      <div class="blend-box multiply">
         Multiply
      </div>
      <div class="blend-box screen">
         Screen
      </div>
      <div class="blend-box overlay">
         Overlay
      </div>
   </body>
</html>
Scroll to Top