CSS <blend-mode> Data Type

The CSS <blend-mode> data type represents how colors are combined when elements or background layers overlap. Each blend mode uses the colors of the source and backdrop to determine the resulting color.

Syntax

The <blend-mode> data type accepts one of the following keyword values:

<blend-mode> = normal | darken | multiply | color-burn | lighten | screen | color-dodge | overlay | soft-light | hard-light | difference | exclusion | hue | saturation | color | luminosity

Values

Value	Description
`normal`	Displays the source color without blending it with the backdrop color.
`darken`	Uses the darker value from the source and backdrop for each color channel.
`multiply`	Multiplies the source and backdrop colors, generally producing a darker result.
`color-burn`	Darkens the backdrop color to reflect the source color and increase contrast.
`lighten`	Uses the lighter value from the source and backdrop for each color channel.
`screen`	Combines the colors in a way that generally produces a lighter result.
`color-dodge`	Brightens the backdrop color to reflect the source color and decrease contrast.
`overlay`	Combines multiply and screen blending depending on the backdrop color.
`soft-light`	Produces a softer lightening or darkening effect based on the source color.
`hard-light`	Combines multiply and screen blending depending on the source color.
`difference`	Subtracts the darker color from the lighter color to create a high-contrast result.
`exclusion`	Produces an effect similar to difference but with lower contrast.
`hue`	Uses the hue of the source color with the saturation and luminosity of the backdrop.
`saturation`	Uses the saturation of the source color with the hue and luminosity of the backdrop.
`color`	Uses the hue and saturation of the source color with the luminosity of the backdrop.
`luminosity`	Uses the luminosity of the source color with the hue and saturation of the backdrop.

How <blend-mode> Works

A blend mode compares the source color with the backdrop color for each affected pixel and calculates a new resulting color. Different blend modes use different calculations, allowing overlapping colors to become darker, lighter, higher in contrast, or otherwise combined.

The background-blend-mode property blends an element's background layers with each other and its background color. The mix-blend-mode property blends an element's content with the backdrop behind the element.

<blend-mode> Example

The following example uses mix-blend-mode to demonstrate how the multiply blend mode combines two overlapping colors:

.blend-example {
  position: relative;
  width: 220px;
  height: 140px;
}
.blue-box, .yellow-box {
  position: absolute;
  width: 120px;
  height: 120px;
}
.blue-box {
  left: 20px;
  background-color: #0088cc;
}
.yellow-box {
  left: 80px;
  background-color: #ffd84d;
  mix-blend-mode: multiply;
}

Browser Result

The <blend-mode> data type is used by CSS properties that control blending, including:

Specifications

The <blend-mode> data type is defined in the Compositing and Blending Module Level 2 .

CSS <blend-mode> Data Type