CSS background-blend-mode Property

The background-blend-mode property is used to specify how an element’s background images should blend with each other and the element’s background color.

The initial value of background-blend-mode property is normal. You can apply this property to all elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It can also be applied to ::first-letter and ::first-line.

The property is neither inheritable nor animatable. The transition between different values will be sudden.

Blending modes should be defined in the same order as the background-image CSS property. If the length of blending mode and background image list is not equal, it will be repeated and/or truncated until lengths match.

Syntax

This is the formal syntax for using background-blend-mode property —

background-blend-mode: <blend-mode>

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

Here are some examples of using this property —

/* One value */
background-blend-mode: normal;  

/* Two values, one per background */
background-blend-mode: darken, luminosity;  

Acceptable Values

normal

In this mode, the top color is the final color. The value of the bottom color doesn’t matter.

multiply

In this mode, the final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change.

screen

In this mode, the final color is the result of inverting the colors, multiplying them and inverting that color value. A black layer leads to no change, and a white layer leads to a white final layer.

overlay

In this mode, the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.

darken

In this mode, the final color is a color composed of the darkest values per color channel.

lighten

In this mode, the final color is a color composed of the lightest values per color channel.

color-dodge

In this mode, the final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.

color-burn

In this mode, the final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value. A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.

hard-light

In this mode, the final color is the result of multiply if the top color is darker, or screen if the top color is lighter. This blend mode is equivalent to overlay but with the layers swapped.

soft-light

In this mode, the final color is similar to hard-light, but softer. This blend mode behaves similar to hard-light.

difference

In this mode, the final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer’s color.

exclusion

In this mode, the final color is similar to difference, but with less contrast. As with difference, a black layer has no effect, while a white layer inverts the other layer’s color.

hue

In this mode, the final color has the hue of the top color, while using the saturation and luminosity of the bottom color.

saturation

In this mode, the final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect.

color

In this mode, the final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground.

luminosity

In this mode, the final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to color, but with the layers swapped.

Examples

See the Pen CSS background-blend-modes Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS background-blend-mode property is fully supported in 62.86% browsers and partially supported in 11.94% browsers. Therefore, its overall browser support is 74.80%.
This property is partially supported in Chrome 46 , Safari 8+, Opera 33+ and iOS Safari 8+. This property is fully supported in Firefox 30+, Chrome 35+, Opera 22+, Android 53+ and Chrome for Android 55+.

Notes and Issues

  • iOS Safari is reported to not support multiple background-blend-modes.
  • Partial in Safari refers to not supporting the hue, saturation, color, and luminosity blend modes.
  • Chrome 46 has some serious bugs with multiply, difference, and exclusion blend modes.

The browser stats and issues were taken from caniuse.com

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top