CSS <blend-mode> Data Type

Description

The CSS blend-mode data type describes how an element is blended with its backdrop. Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap.

The blend-mode data type can be used with the background-blend-mode and mix-blend-mode properties. The background-blend-mode property controls how background images and colors are blended together, while the mix-blend-mode property controls how an element's content is blended with its direct parent background.

There are many different blend modes available, each with a different effect. Some popular blend modes include:

  • normal: This is the default blend mode and does not blend the source element with its backdrop.
  • multiply: This blend mode darkens the resulting color.
  • screen: This blend mode lightens the resulting color.
  • overlay: This blend mode combines the source and backdrop colors to create a new color that is darker than the source color and lighter than the backdrop color.
  • soft-light: This blend mode creates a softer effect than the overlay blend mode.

Blend modes can be used to create a variety of interesting and creative effects. For example, you can use the multiply blend mode to create a drop shadow effect, or the screen blend mode to create a vignette effect.

Here is an example of how to use the blend-mode data type to create a drop shadow effect:

.box {
  width: 100px;
  height: 100px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.shadow {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100px;
  height: 100px;
  background-color: black;
  opacity: 0.2;
  blend-mode: multiply;
}

The .shadow element will create a black drop shadow behind the .box element. The opacity property is used to make the drop shadow semi-transparent, and the blend-mode property is set to multiply to blend the shadow with the background color of the .box element.

Blend modes are a powerful tool that can be used to create a variety of interesting and creative effects. Experiment with different blend modes to see what effects you can achieve.

Syntax

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

Values

  • normalThis is the default attribute which specifies no blending. The blending formula simply selects the source color.
  • multiplyThe source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.
  • screenMultiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen.
  • overlayMultiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop.
  • darkenSelects the darker of the backdrop and source colors. The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged.
  • lightenSelects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged.
  • color-dodgeBrightens the backdrop color to reflect the source color. Painting with black produces no changes.
  • color-burnDarkens the backdrop color to reflect the source color. Painting with white produces no change.
  • hard-lightMultiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.
  • soft-lightDarkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.
  • differenceSubtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change.
  • exclusionProduces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change.
  • hueCreates a color with the hue of the source color and the saturation and luminosity of the backdrop color.
  • saturationCreates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.
  • colorCreates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.
  • luminosityCreates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode.

Example

<div></div>
<div class="test"></div>
div {
   width: 300px;
   height: 226px;
   background-image: url('images/sunset.jpg');
   background-color: green;
   display: inline-block;
   margin: 10px;
}
.test {
   background-blend-mode: difference;
}

Browser Support

The following table will show you the current browser support for the CSS blend-mode data type.

Desktop
Edge Chrome Firefox Opera Safari
793530228
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
5954228759

Last updated by CSSPortal on: 7th October 2023