CSS mix-blend-mode
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
multiplyandscreenmodes. 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
darkenbut 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
multiplyandscreenmodes. Equivalent tooverlay, 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 being0,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
inheritorinitial, 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
CSS Specifications
- The
mix-blend-modeproperty is defined in Compositing and Blending Level 1 (W3C Candidate Recommendation, 13 January 2015).
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.