CSS background-blend-mode Property

What You’ll Learn

The background-blend-mode property controls how an element’s background layers blend together. It is useful for combining colors, gradients, textures, and images into richer visual effects.

Definition and Usage

The background-blend-mode CSS property specifies how an element’s background layers should blend with each other. Those layers can include a background-color and one or more images or gradients declared in background-image.

This makes it possible to tint photos, combine textures, or merge two gradients without using extra HTML elements or image-editing software.

📝 Syntax

Apply background-blend-mode to an element that has multiple background layers:

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

Basic Example

.panel {
  background-color: #2563eb;
  background-image: linear-gradient(135deg, #facc15, #ef4444);
  background-blend-mode: multiply;
}

Common Blend Mode Keywords

• normal — no blending; layers stack normally
• multiply, screen, overlay — popular general-purpose modes
• darken, lighten, color-dodge, color-burn
• hard-light, soft-light, difference, exclusion
• hue, saturation, color, luminosity

Syntax Rules

• You can assign one blend mode to all layers or comma-separated modes for each layer.
• The initial value is normal.
• It only affects the element’s own background layers, not child elements.
• It works with colors, gradients, and background images together.
• For blending the whole element with the page behind it, use mix-blend-mode instead.

Default Value

The initial value of background-blend-mode is normal. Background layers are displayed one on top of the other without any special blending until you choose a blend mode.

💎 Property Values

These are some of the most useful background-blend-mode values for beginners.

What Gets Blended?

background-blend-mode blends the element’s own background layers, including:

• background-color — often used as a tint layer beneath an image or gradient
• Multiple gradients — stacked in one background-image declaration
• Multiple images — such as a texture over a photo
• Color + image combinations — one of the most common beginner patterns

background-blend-mode vs mix-blend-mode

Examples Gallery

Try background-blend-mode with multiply, overlay, screen, and a side-by-side mode comparison.

.panel {
  background-color: #2563eb;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(15,23,42,0.55));
  background-blend-mode: multiply;
}

.hero {
  background-image:
    linear-gradient(135deg, #f97316, #db2777),
    linear-gradient(45deg, #2563eb, #14b8a6);
  background-blend-mode: overlay;
}

.card {
  background-color: #1e293b;
  background-image: radial-gradient(circle at top left, #38bdf8, transparent 55%);
  background-blend-mode: screen;
}

.tile {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #facc15, #ef4444);
}
.multiply { background-blend-mode: multiply; }
.overlay { background-blend-mode: overlay; }

💡 Best Practices