CSS Reference Property

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 isolation property is set to auto, 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:

The default result of blending the piece of text with the image using the <code>overlay</code> blend mode.
The default result of blending the piece of text with the image using the 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)

The result of isolating the text from the image: the text is no longer blending with its backdrop.
The result of isolating the text from the image: the text is no longer blending with its backdrop.

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.

View this demo on the Codrops Playground

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
  • 56
  • No
  • 57
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:34 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.