CSS <blend-mode> Data Type

The <blend-mode> CSS data type defines how an element’s content should blend with the content behind it. It is primarily used in conjunction with the mix-blend-mode and background-blend-mode properties, allowing designers to create visual effects that combine colors and layers in sophisticated ways. Unlike simple opacity, which only makes an element transparent, <blend-mode> allows for complex interactions such as darkening, lightening, or multiplying colors depending on the underlying layers.

This data type includes multiple blend modes, such as multiply, screen, overlay, darken, lighten, and color-dodge, among others. Each mode changes the way colors are calculated between overlapping elements. For example, multiply multiplies the background and foreground colors, resulting in a darker color, while screen does the opposite, producing a lighter effect. These blend modes are similar to those found in image editing software like Photoshop, making them useful for web designers looking to replicate artistic effects directly in the browser.

In practical use, <blend-mode> can be applied to both text and graphical elements. For instance, using it on an image inside a div or img can create visually engaging compositions with background colors or other layered content. It works particularly well in conjunction with CSS filters, gradients, or animations to enhance dynamic visual presentations.

Example:

div {
  background-color: #ffcc00;
  mix-blend-mode: multiply; /* uses <blend-mode> */
  width: 200px;
  height: 200px;
}

img {
  mix-blend-mode: screen; /* uses <blend-mode> */
  width: 200px;
  height: 200px;
}

<div>
  <img src="example.jpg" alt="Example Image">
</div>

In this example, the div’s yellow background blends with the image according to the mix-blend-mode rules, creating a new composite color where the two overlap. The <blend-mode> data type offers designers fine control over visual layering effects without requiring complex image editing, making it a versatile tool for modern web design.

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

• 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.

The following information will show you the current browser support for the CSS blend-mode data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.

This data type is supported by all modern browsers.

Desktop

Tablets & Mobile