CSS Blend Modes

CSS blend modes control how the colors of overlapping elements or background layers are combined. Instead of one color simply covering another, a blend mode calculates a new color from the layers being blended.

CSS provides two main properties for blending: mix-blend-mode blends an element with content behind it, while background-blend-mode blends an element's background layers with each other and with its background color.

How Blending Works

When two visual layers overlap, the browser normally displays the upper layer over the layer beneath it. A blend mode changes how the colors of those layers interact in the overlapping area.

The result depends on both the blend mode and the colors being combined. The same blend mode can therefore produce very different results when used with different colors, images, or backgrounds.

.top {
  mix-blend-mode: multiply;
}

In this example, the colors of the .top element are blended with the content behind it using the multiply blend mode.

mix-blend-mode

The mix-blend-mode property specifies how an element's content blends with the content behind it.

.circle {
  mix-blend-mode: multiply;
}

The effect becomes visible where the element overlaps other rendered content.

For example, two overlapping colored circles can produce a third visible color in their shared area.

.blue {
  background-color: #0088cc;
}
.green {
  background-color: #02bf57;
  mix-blend-mode: multiply;
}

The green circle blends with the blue circle where they overlap instead of simply covering it.

background-blend-mode

The background-blend-mode property controls how an element's background images blend with each other and with its background color.

.banner {
  background-color: #0088cc;
  background-image: linear-gradient(45deg, #ffcc00, #02bf57);
  background-blend-mode: multiply;
}

Unlike mix-blend-mode, this property blends background layers inside the same element rather than blending the entire element with content behind it.

normal

The normal value uses standard compositing without an additional blend calculation. It is the initial value for both mix-blend-mode and background-blend-mode.

.box {
  mix-blend-mode: normal;
}

The upper element is displayed normally over the content behind it.

multiply

The multiply blend mode generally produces a darker result by multiplying the color components of the overlapping layers.

.box {
  mix-blend-mode: multiply;
}

White has little visible effect when multiplied with another color, while darker colors tend to make the blended result darker.

multiply is useful for combining colored layers, adding shading, and blending graphics with lighter backgrounds.

screen

The screen blend mode generally produces a lighter result. It can be thought of as roughly the opposite visual effect of multiply.

.box {
  mix-blend-mode: screen;
}

Black has little visible effect when screened with another color, while lighter colors tend to make the result brighter.

This mode can be useful for light effects and combining bright graphics over darker backgrounds.

overlay

The overlay blend mode combines characteristics of multiply and screen. Dark areas tend to become darker while light areas tend to become lighter.

.box {
  mix-blend-mode: overlay;
}

The result depends strongly on the colors and tones of the backdrop, making overlay useful for increasing visual contrast between blended layers.

darken and lighten

The darken and lighten modes compare the colors of the source and backdrop.

.dark {
  mix-blend-mode: darken;
}
.light {
  mix-blend-mode: lighten;
}

darken keeps the darker result for each color component, while lighten keeps the lighter result.

These modes can produce noticeably different results when overlapping elements contain strongly contrasting colors.

difference and exclusion

The difference mode compares the source and backdrop colors and produces a result based on the difference between their color components.

.box {
  mix-blend-mode: difference;
}

This can create dramatic color changes, especially when light and dark colors overlap.

The exclusion mode produces a related effect but generally with less contrast.

.box {
  mix-blend-mode: exclusion;
}

Color Blend Modes

Several blend modes work with color characteristics such as hue, saturation, color, and luminosity.

Value	General Effect
`hue`	Uses the hue of the source with saturation and luminosity influenced by the backdrop.
`saturation`	Uses the saturation of the source while retaining other color characteristics from the backdrop.
`color`	Uses the hue and saturation of the source while retaining the backdrop's luminosity.
`luminosity`	Uses the luminosity of the source while retaining color characteristics from the backdrop.

These modes are especially useful when colorizing images or combining colored overlays with photographic content.

Blending Multiple Backgrounds

An element can contain several background images, and background-blend-mode can control how those layers interact.

.box {
  background-image:
    linear-gradient(45deg, #0088cc, transparent),
    linear-gradient(-45deg, #02bf57, #ffcc00);
  background-blend-mode: multiply;
}

The background layers are blended together before the final background is rendered.

Multiple blend modes can also be supplied as a comma-separated list when different background layers need different blending behavior.

.box {
  background-image:
    linear-gradient(#0088cc, transparent),
    linear-gradient(#02bf57, #ffcc00);
  background-blend-mode: screen, multiply;
}

Controlling Blending with isolation

An element using mix-blend-mode can blend with content behind it. The isolation property can create a new stacking context that limits blending to a particular group of elements.

.blend-group {
  isolation: isolate;
}

Descendants inside the isolated group can blend with each other without continuing to blend with content behind the group.

This is useful when a blend effect should remain contained within a component or visual composition.

Blend Mode Values

CSS provides several blend mode values for creating different visual interactions between colors and layers.

Value	General Effect
`normal`	Uses normal compositing.
`multiply`	Generally darkens the result.
`screen`	Generally lightens the result.
`overlay`	Combines multiply and screen behavior.
`darken`	Selects darker color components.
`lighten`	Selects lighter color components.
`color-dodge`	Brightens the backdrop based on the source color.
`color-burn`	Darkens the backdrop based on the source color.
`hard-light`	Uses multiply or screen according to the source color.
`soft-light`	Produces a softer lightening or darkening effect.
`difference`	Creates colors from differences between the layers.
`exclusion`	Creates a lower-contrast difference effect.
`hue`	Blends using the source hue.
`saturation`	Blends using the source saturation.
`color`	Blends using source hue and saturation.
`luminosity`	Blends using source luminosity.

CSS Blend Mode Example

The following example places overlapping colored circles inside separate containers. Each example applies a different blend mode to the upper circle.

.multiply .circle-two {
  mix-blend-mode: multiply;
}
.screen .circle-two {
  mix-blend-mode: screen;
}
.overlay .circle-two {
  mix-blend-mode: overlay;
}
.difference .circle-two {
  mix-blend-mode: difference;
}

Open the example in the editor and replace the blend mode values with darken, lighten, color-dodge, color-burn, hard-light, soft-light, exclusion, hue, saturation, color, or luminosity. Try changing the circle colors too, because the result of a blend mode depends on the colors being combined.

Play in Editor