CSS mix-blend-mode

View Output

The CSS mix-blend-mode property defines how an element blends with its backdrop. In other words, how an element's content blends with the content of the element below it.

For example, you could blend an <img> element with the background color of the <body> element. You can blend images with images, colors with colors, as well as a combination of images with colors.

Also see background-blend-mode for blending each of an element's background layers.

Syntax

Possible Values

Here are the possible values:

normal
Default value. Sets the blend mode to normal. The top layer is the final color without mixing its colors with the layers beneath it. Similar to placing a piece of opaque paper over another.
multiply
Multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. This results in a darker color. Similar to two images on transparent film overlapping.
screen
The values of the pixels in the two layers are inverted, multiplied, and then inverted again. This has the opposite effect to multiply. The result is a brighter color.
overlay
Combines multiply and screen modes. The parts of the top layer where the base layer is light become lighter, the parts where the base layer is dark become darker.
darken
Keeps the darker tones of each layer. All pixels of the layer that are darker than the ones on the layer/s below are kept in the image. If the pixels are lighter, they are replaced with the ones from the layer/s below. This rule is applied to each of the three RGB (Red, Green, Blue) channels separately.
lighten
Same behavior as darken but with the lighter tones kept instead.
color-dodge
Divides the bottom layer by the inverted top layer. This lightens the bottom layer depending on how bright the top layer is (i.e. the brighter the top layer, the more its color affects the bottom layer).
color-burn
Divides the inverted bottom layer by the top layer, and then inverts the result. This darkens the top layer increasing the contrast to reflect the color of the bottom layer. The darker the bottom layer, the more its color is used.
hard-light
Combines the multiply and screen modes. Equivalent to overlay, but with the bottom and top images swapped.
soft-light
Softer version of hard-light
difference
Subtracts the bottom layer from the top layer or the other way round, to always get a positive value (i.e. subtracting the darker color from the lighter color). Blending with black produces no result, as the value will always be 0 (due to the RGB value for black being 0,0,0). Blending with white inverts the other layer's color.
exclusion
Similar to difference, but with lower contrast.
hue
Results in the hue of the top color, while using the saturation and luminosity of the bottom color.
saturation
Results in the saturation of the top color, while using the hue and luminosity of the bottom color.
color
Results in the hue and saturation of the top color, while using the luminosity of the bottom color.
luminosity
Results in the luminosity of the top color, while using the hue and saturation of the bottom color.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Initial Value
normal
Applies To
All elements. When used with Scalable Vector Graphics (SVG), it applies to container elements, graphics elements and graphics referencing elements.
Inherited?
No
Media
Visual
Animatable
No

Example Code

Basic CSS

Working Example within an HTML Document

View Output

CSS Specifications

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.