How CSS background-blend-mode Works

The CSS background-blend-mode property dictates how an element's multiple background layers—such as background images, gradients, and a background color—blend with one another visually. By applying standard digital imaging blend modes directly in the stylesheet, developers can create sophisticated visual effects without pre-rendering altered images in graphic editing software. This guide covers the layering mechanics, stacking order, and operational behavior of background-blend-mode.

The Background Layer Stack

To understand how blending occurs, you must first understand how CSS stacks backgrounds. In CSS, an element can have multiple background images or gradients alongside a single background color.

  1. Top Layers: The first background image declared in the background-image list sits at the very top of the stack.
  2. Subsequent Layers: Each following image sits directly beneath the previous one.
  3. Base Layer: The background-color is always rendered as the bottommost layer, beneath all background images and gradients.

How the Blending Process Works

Blending is calculated from the bottom of the stack upward.

The bottommost image layer blends with the underlying background-color. The resulting composite then serves as the backdrop for the next image layer up, repeating this process sequentially until the topmost background layer is blended into the final output.

Because the property only applies to the element's own background context, background layers do not blend with the element's text, child elements, or parent elements. To blend an entire element with its surrounding DOM context, mix-blend-mode is used instead.

Syntax and Layer Mapping

The background-blend-mode property accepts a comma-separated list of blend modes corresponding to each background image layer:

.card {
  background-image: url('pattern.png'), url('photo.jpg');
  background-color: #3b82f6;
  background-blend-mode: multiply, screen;
}

In this example:

  • photo.jpg blends with the blue background-color using the screen mode.
  • pattern.png blends with the composite below it using the multiply mode.

If fewer blend modes are provided than there are background images, the list of blend modes repeats from the beginning to match the number of images. If only a single value is provided, it applies to every layer in the stack.

Common Blend Modes

Blend modes perform specific mathematical formulas on the color channel values (ranging from 0 to 1) of overlapping pixels:

  • normal: The default setting. The upper layer fully obscures the lower layer based on its opacity, with no color calculation applied.
  • multiply: Multiplies the color values of the upper and lower layers, resulting in a darker overall tone. Blending with white produces no change, while blending with black results in black.
  • screen: Inverts, multiplies, and inverts the color values back, resulting in a brighter overall tone. Blending with black leaves the image unchanged, while blending with white results in pure white.
  • overlay: Combines multiply and screen depending on the base layer's brightness. Light areas become lighter and dark areas become darker, increasing overall contrast.
  • darken and lighten: Selects the darker or lighter pixel value between the overlapping layers on a per-channel basis.
  • color-dodge and color-burn: Brightens or darkens the base color to reflect the blend color by decreasing or increasing contrast.
  • luminosity, color, hue, and saturation: Blends specific HSL components while preserving the other components of the underlying layer.

Transparency and Opaque Layers

Blending calculations rely heavily on alpha channels. If a top image layer is completely opaque and uses the normal blend mode, it will completely hide any background layers and colors beneath it. For blend modes to produce visible results across layers, the images should either possess transparent areas, use semi-transparent gradients, or use blend modes other than normal.