isolation
The isolation property is used to isolate a group of elements so that they do not blend with their backdrop.
When an element is isolated using the isolation property, a new stacking context is created. Elements inside that context will not blend with the element’s backdrop anymore.
The isolation property can be used in conjunction with the mix-blend-mode property.
If you are using the background-blend-mode property, the isolation property is not needed since background layers must not blend with the content that is behind the element, instead they must act as if they are rendered into an isolated group (the element itself).
You can isolate elements to prevent them from blending with their backdrop using the isolation property. However, everything in CSS that creates a stacking context must be considered an isolated group. HTML elements themselves should not create groups. This implies that even if you do not explicitly isolate elements using isolation, they might still be isolated if a stacking-context-creating property is used.
Trivia & Notes
In CSS, a background image or the content of an img must always be rendered into an isolated group. For instance, if you link to an SVG file through the img tag, the artwork of that SVG will not blend with the backdrop of the content.
Also, in SVG, the <mask> element always creates an isolated group.
Official Syntax
-
Syntax:
isolation: auto | isolate - Initial: auto
- Applies To: All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements.
- Animatable: no
Values
- auto
-
By default, elements get this value which implies that they are not isolated.
However, even if the
isolationproperty is set toauto, a group of elements can still be isolated if operations that cause the creation of stacking context are performed. - isolate
- This creates a new stacking context on an element, and isolates the group. However, elements inside the same stacking context will blend with their backdrop that lies within that context.
Examples
In the following example, we have a piece of text wrapped in a text wrapper, positioned on top of an image.
<div class="container">
<img src="isolation-destination.jpg" alt="Yellow tree.">
<div class="text-wrapper">
<h1>SUNSHINE</h1>
</div>
</div>
The text is blended with its backdrop using the mix-blend-mode property with the blend mode value overlay.
h1 {
mix-blend-mode: overlay;
}
The result looks like so:
overlay blend mode.
We can isolate the text from its backdrop by using the isolation property on the text wrapper—this will isolate the content of the wrapper (i.e. our text), and prevent it from blending with the image.
.text-wrapper {
isolation: isolate;
}
The result of using mix-blend-mode on the text becomes: (no blending)
See the Lie Demo section below for a live example.
Live Demo
Isolate the text wrapper in the following demo to prevent the text from blending with its backdrop.
Note that if you are viewing this demo in a browser that does not support the mix-blend-mode property, the text will not be blended anyway.
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
- 66
- No
- 66
- 60