The mix-blend-mode property is used to specify the blend mode for blending an element with its backdrop.
A backdrop is the content behind the element—known as the source element—and is what the element is composited with. The destination element is the element that lies behind the source element, and which the source overlaps with. The backdrop is the area where the color blending is done between the source and the destination.
The backdrop is the area where the color blending is done between the source and the destination.
The mix-blend-mode property can be used to mix together any element with its backdrop. For example, you can mix text with whatever (images, for example) it overlaps with, images with other images, a fixed header with the scrolling content of the page, etc.
Trivia & Notes
Blending elements is/can be restricted by any existing stacking contexts.
Blending and Stacking Contexts
There are 16 available blend modes in CSS. The default value is normal. When a value other than normal is specified on an element, this leads to the creation of a new stacking context on that element, forming a new group. This group must then be blended and composited with the stacking context that contains the element.
In addition to that, an element that has blending applied, must blend with all the underlying content of the stacking context that that element belongs to. It will not blend with contents outside that context.
This means that an element belonging to a stacking context is isolated from the rest of the content outside that stacking context. Therefore, unless the entire context (the context’s root element) is blended with an element behind it, the contents will not blend with the latter.
Any property that leads to the creation of a stacking context can hence affect blending. (See the examples section below for an example).
If you are not using any stacking-context-creating properties but you still want to isolate an element (or more), you can use the isolation property to do just that. refer to the property’s entry for more information.
The mix-blend-mode property is used to blend the colors of an element and its backdrop. If you want to blend an element’s background images together, you can use the background-blend-mode property.
Official Syntax
-
Syntax:
mix-blend-mode: <blend-mode> - Initial: normal
- Applies To: All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements.
- Animatable: no
Values
- <blend-mode>
-
Refer to the
<blend-mode>entry for a list of possible values.
Examples
The following example applies a mix blend mode to an h1 positioned on top of an image that is also mixed with the background color of the body:
<body>
<div class="container container-1">
<img src="scene.jpg" alt="Bird image.">
<h1>Breathe</h1>
</div>
</body>
body {
/* ... */
background-color: #eee;
}
img {
/* ... */
mix-blend-mode: luminosity; /* creates a monochrome "tinted" image effect */
}
h1 {
/* ... */
mix-blend-mode: difference; /* inverts the colors of the backdrop; i.e. where the text overlaps the image */
}
The result of the above example looks like so:
If we were to create a stacking context on the container which contains the image and text, this will prevent the image from being blended with the background color of the body.
We can isolate the contents of the container by either using the opacity property with a value other than “1” (because it leads to the creation of a new stacking context), or we could use the isolation property. For now, let’s use the opacity property.
.container-1 {
opacity: .99;
}
The above example will then look like so:
It goes without saying that you can also blend two images together. The result of blending an image with the image from the above examples looks like so:
overlay blend mode.
You can also mix together pieces of text. For example, if you were to overlap two pieces of an h1 and then apply a mix blend mode value difference to the piece on top (the source), you could create something like:
mix-blend-mode property.You can find the live demos for all of the above examples in the Live Demo section below.
Live Demo
View this demo on the Codrops PlaygroundAn interactive demo
Even with the definition of each blend mode known, it is very hard (if not impossible) to predict how applying a certain blend mode will affect the blended elements. Picking a blend mode is usually a case of trial and error—you may keep changing modes until you are satisfied with the end result.
For that reason, I have created an interactive demo that you can use to test the effect of different blend modes on a background image of your choice. You can also choose the background color. The demo is useful for testing the background-blend-mode property.
That being said, you can also toggle an editable piece of text, and then apply a blend mode to blend the text with the image in its backdrop in the preview area. You can also choose the text’s color and background color.
You can play with the interactive demo here.
Browser Support
Blending of HTML/SVG elements
Allows blending between arbitrary SVG and HTML elements
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 41
- 32
- No
- 29
- 7.1
Mobile / Tablet
- 8
- 131
- No
- 131
- 132
