Isolation - CSS Property

isolation

Summary of characteristics of the isolation property

Quick description
Allows or does not allow interactions between layers.
Status
Standard
Predefined values
auto | isolate
Percentages
Not applicable.
Initial value
auto
Inherited by default
No.
Animation type
Not animable: the isolation property cannot be animated.
Canonical order
Single: single value (no order).
W3C Module
Compositing and Blending
References (W3C)
Document status: CR (Candidate Recommendation)

Syntax diagram of isolation.

Isolation property - Syntax diagramSyntax diagram of the isolation CSS property. See stylescss.free.fr for details. auto auto isolate isolateisolation:;isolation:;
Syntax diagram of the isolation property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

Description of the isolation property.

Determines if an element's content interacts with its parent in terms of colors, or not. In other words, isolation can create a layer of isolation between the element and its parent.

isolation is useful when blend modes have been set by the mix-blend-mode property.

Isolation
mix-blend-mode:normal
The property isolation has no visible effect.
Isolation
mix-blend-mode:darken
on the image.
Isolation
mix-blend-mode:darken
on the image.
isolation:isolate on the child element.

Values for isolation.

  • isolation: auto;

    The browser decides if it's necessary to create an isolation level or not. Usually, no isolation level is created.

    The background colors of these two elements blend together.
    isolation:auto;
  • isolation: isolate;

    A layer of isolation is created. This means that mix-blend-mode no longer works.

    The background colors of these two elements de not blend together..
    isolation:isolate;
  • isolation: initial; (auto) isolation: inherit; isolation: revert; isolation: revert-layer; isolation: revert-rule; isolation: unset;

    These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the isolation property..

It's not possible to animate the isolation property.

Simulator.

Here's how this demonstration for the property isolation is set up: an image (the ball) is inside a transparent div, which itself is inside another div with a graphic background (the bird texture).

The image is "blended" with the background through its mix-blend-mode property. You can clearly see that the bird pattern interacts with the balloon. Let's note that the balloon itself is black and white, and it has no transparent parts.

The simulator applies the isolation property to the transparent div. Notice that this element can isolate the image from the background and thus prevent them from interacting.

How the isolation property works in CSS

 

isolation :
Example for the CSS isolation property

Browsers compatibility with isolation.

The property Isolation is properly recognized by current browsers.
The old Internet Explorer browser doesn't support it.

Column 1
Status of browser support for the isolation property.
1
isolation
property
Estimated overall support.
97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Samsung Internet

Safari

Safari sur IOS

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

Historic of the isolation property.

  • Compositing and Blending Level 1

    This module defines how the images of overlapping elements are composed. In this module, you will find:
    - composition operators,
    - advanced blending modes,
    - composition groups,
    - properties for isolation.

    Regarding isolation First definition of the isolation property.
    WD
    August 16, 2012
    Working Draft.
    CR
    February 20, 2014
    Candidate Recommendation.
    PR
    REC

See also, about blend modes.

Blend modes are described in the Compositing and Blending module. All related properties are in this module:

Properties:

background-blend-mode
Defines the mixing of colors between background image(s) and background color.
Isolation
Allows or does not allow interactions between layers.
mix-blend-mode
Langue française
Sets how the content blends with what's visible in the background of the clip.

Also check out our tutorial on Blend modes.