CSS background-blend-mode Property

Posted in CSS Tutorial

Updated on Sep 04, 2024

By Mari Selvan

👁️ 33 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The background-blend-mode property in CSS allows web developers to control how multiple background images are blended together.

This property defines the blending mode for each layer, making it possible to create complex visual effects by combining colors and images in different ways.

💡 Syntax

The background-blend-mode property is applied to an element that has multiple background layers. The syntax is as follows:

Syntax

Copied

element {
  background-blend-mode: blend-mode;
}

Here, blend-mode can be one of several predefined values that determine how the background layers interact.

🎛️ Default Value

The default value of the background-blend-mode property is normal, which means that the background layers are simply stacked without any blending.

🏠 Property Values

Value	Description
normal	The default behavior, where background layers are displayed as they are.
multiply	Multiplies the colors of the background layers, resulting in a darker effect.
screen	The inverse of multiply, resulting in a lighter effect.
overlay	Combines multiply and screen to preserve the highlights and shadows of the background layers.
darken	Displays the darker colors from the background layers.
lighten	Displays the lighter colors from the background layers.
color-dodge	Brightens the background layers, making the colors more intense.
color-burn	Darkens the background layers, increasing the contrast.
hard-light	Simulates a strong light source, combining multiply and screen.
soft-light	Similar to hard-light, but with softer edges and transitions.
difference	Subtracts the colors of the background layers from each other.
exclusion	Similar to difference, but with lower contrast.
hue	Applies the hue (color tone) of the blend layer to the base layer.
saturation	Applies the saturation of the blend layer to the base layer.
color	Applies the color of the blend layer to the base layer while preserving brightness.
luminosity	Applies the brightness of the blend layer to the base layer while preserving color.

📄 Example

In this example, we'll blend two background images using the multiply blend mode.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS background-blend-mode Example</title>
  <style>
    .blended-background {
      width: 100%;
      height: 300px;
      background-image: url('image1.jpg'), url('image2.png');
      background-blend-mode: multiply;
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>Background Blend Mode Example</h1>
  <div class="blended-background"></div>
</body>
</html>

🖥️ Browser Compatibility

The background-blend-mode property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is important to test your website in different browsers to ensure that the blend modes render as expected.

🎉 Conclusion

The background-blend-mode property offers a powerful way to create visually striking effects by blending multiple background images together. Whether you're looking to enhance a design with subtle texture or create a dynamic, layered background, this property provides the flexibility to achieve your desired effect. Experiment with different blend modes to see how they can transform your web designs.