CSS

🎯 What is background-blend-mode?

The background-blend-mode property controls how:

background images
background colors
gradients

interact visually when layered together.

🧩 Simple Definition

CSS

background-blend-mode = controls how background layers blend together

💡 Basic Syntax

CSS

background-blend-mode: value;

🧠 Why Is It Useful?

This property is commonly used to create:

dark overlay effects
color filters
contrast effects
modern hero sections
cinematic backgrounds

without editing images manually.

🧩 Basic Example

CSS


div {

  background-image: url("image.jpg");

  background-color: red;

  background-blend-mode: multiply;

}

🧠 Explanation

In this example:

the image is layered with a red background color
multiply blends both layers together
the result becomes darker with stronger red tones

⚙️ Common Blend Modes

Value	Description
normal	No blending
multiply	Creates a darker effect
screen	Creates a lighter effect
overlay	Increases contrast
darken	Keeps darker colors
lighten	Keeps lighter colors
color-dodge	Brightens colors
color-burn	Darkens and increases contrast
hard-light	Strong lighting effect
soft-light	Softer lighting effect
difference	Creates inverted color effects
exclusion	Similar to difference with lower contrast
hue	Blends color tones
saturation	Blends color intensity
color	Blends colors while preserving brightness
luminosity	Blends brightness while preserving colors

🔹 normal

CSS

background-blend-mode: normal;

👉 No blending is applied.

The top background layer appears normally.

🔹 multiply

CSS

background-blend-mode: multiply;

👉 Darkens the image by multiplying color values.

Often used for dark overlays.

🔹 screen

CSS

background-blend-mode: screen;

👉 Creates a brighter appearance.

Useful for glowing or light effects.

🔹 overlay

CSS

background-blend-mode: overlay;

👉 Combines multiply and screen.

Increases contrast while preserving highlights and shadows.

🔹 soft-light

CSS

background-blend-mode: soft-light;

👉 Creates a subtle lighting effect with softer contrast.

🧩 Practical Example

Dark Hero Section Overlay

CSS


.hero {

  background-image:
    url("hero.jpg");

  background-color: rgba(0, 0, 0, 0.5);

  background-blend-mode: multiply;

}

🧠 Result

the image becomes darker
text becomes easier to read
the section looks more cinematic

🎨 Multiple Background Layers

You can blend multiple backgrounds together.

Example

CSS


div {

  background-image:
    linear-gradient(to right, blue, purple),
    url("image.jpg");

  background-blend-mode: overlay;

}

👉 The gradient and image blend together to create a modern visual effect.

⚠️ Important Note

The background-blend-mode property only works when there are multiple background layers.

For example:

✅ background image + background color
✅ gradient + image
✅ multiple images

If there is only one background layer, blending has no visible effect.

🎯 Common Use Cases

background-blend-mode is frequently used for:

hero sections
landing pages
dark overlays
artistic UI effects
modern website designs
cinematic backgrounds

CSS Background Clip

CSS Linear Gradient