📌 What Is background-blend-mode?

The background-blend-mode property controls how multiple background layers blend with each other and with the element’s background color — using the same blending modes found in Photoshop and digital art tools.
It works when an element has multiple backgrounds (e.g., gradients + images). This property creates visually striking effects like overlays, color grading, artistic image styling, and cinematic UI backgrounds. 🎬✨

🧩 Basic Syntax

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

🎨 When Does background-blend-mode Work?

🧪 Basic Example

.hero {
  background-image: 
    url(hero.jpg),
    linear-gradient(to bottom, #0008, #0008);

  background-blend-mode: overlay;
}

✔ Gradient darkens the image for better text contrast.

🎯 How Blending Works

Blending happens between each pair of overlapping backgrounds:

📦 Multiple Background Example

.card {
  background-image:
    url(texture.png),
    linear-gradient(120deg, red, blue);

  background-blend-mode: multiply;
}

✔ Creates a vivid colorized effect with realistic shading.

🌈 All Blend Modes & Their Effects

🧪 Example: Darkened Hero Image

.hero {
  background-image:
    url(hero.jpg),
    linear-gradient(to top, rgba(0,0,0,0.6), transparent);

  background-blend-mode: darken;
}

✔ Excellent for readable hero text.

🔥 Example: Vivid Color Overlay

.poster {
  background-image:
    url(poster.jpg),
    radial-gradient(circle, gold, crimson);

  background-blend-mode: color-burn;
}

✔ Great for album covers, posters, creative UIs.

🌈 Example: Soft-Lighting Photo Frame

.photo {
  background-image:
    url(portrait.jpg),
    linear-gradient(135deg, #fff3, #0003);

  background-blend-mode: soft-light;
}

✔ Adds subtle light diffusion for a professional look.

🖼️ Example: Multiple Layers + Texture

.texture-card {
  background-image:
    url(texture.png),
    url(photo.jpg),
    linear-gradient(130deg, #005, #500);

  background-blend-mode: multiply, overlay, normal;
}

✔ Each blend mode applies to its corresponding background layer.

🛠️ animation + blend-mode

@keyframes fadeBlend {
  0%   { background-blend-mode: multiply; }
  100% { background-blend-mode: screen; }
}

.card {
  animation: fadeBlend 2s infinite alternate;
}

⚠️ Important Notes

🔍 Debugging Tips

🌐 Browser Support

🔗 Helpful Resources