CSS background-blend-mode Property

CSS background-blend-mode Property

The background-blend-mode property in CSS defines how a background image and background color (or multiple background images) should blend together using blend modes.

1. Syntax

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

2. Accepted Values

Blend Mode	Description
normal (default)	No blending, background images and colors appear as usual.
multiply	Multiplies background layers, making darker areas more prominent.
screen	Inverts the colors, multiplies them, then inverts them again (lighter effect).
overlay	Mix of multiply and screen, increasing contrast.
darken	Keeps only the darkest colors from each layer.
lighten	Keeps only the lightest colors from each layer.
color-dodge	Brightens the background based on blend colors.
color-burn	Darkens the background based on blend colors.
hard-light	Similar to overlay, but based on the top layer.
soft-light	A softer version of hard-light, with subtle contrast.
difference	Subtracts pixel values, creating high contrast effects.
exclusion	Similar to difference, but with lower contrast.
hue	Applies the hue of the top layer while keeping the saturation and brightness of the bottom layer.
saturation	Keeps the saturation of the top layer but uses the hue and brightness of the bottom layer.
color	Uses the hue and saturation of the top layer while keeping the brightness of the bottom layer.
luminosity	Uses the brightness of the top layer while keeping the hue and saturation of the bottom layer.

3. Example – Blending Background Color and Image

.box {
  width: 300px;
  height: 200px;
  background-image: url("image.jpg");
  background-color: rgba(255, 0, 0, 0.5); /* Red with transparency */
  background-blend-mode: multiply;
}

✅ The image and red color blend together, making the image darker.

4. Example – Blending Multiple Background Images

.box {
  width: 300px;
  height: 200px;
  background-image: url("texture.png"), url("pattern.png");
  background-blend-mode: overlay;
}

✅ The two images blend together using the overlay effect.

5. Best Practices

✔ Use multiply for darkening effects.
✔ Use overlay or soft-light for subtle effects.
✔ Test different blend modes  background-image for creative effects.