`isolation` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since January 2020.

The isolation CSS property determines whether an element must create a new stacking context.

This property is especially helpful when used in conjunction with mix-blend-mode and z-index.

Try it

isolation: auto;

isolation: isolate;

<section class="default-example" id="default-example">
  <div class="background-container">
    <div id="example-element">
      <img src="/shared-assets/images/examples/firefox-logo.svg" />
      <p><code>mix-blend-mode: multiply;</code></p>
    </div>
  </div>
</section>

.background-container {
  background-color: #f4f460;
  width: 250px;
}

#example-element {
  border: 1px solid black;
  margin: 2em;
}

#example-element * {
  mix-blend-mode: multiply;
  color: #8245a3;
}

Syntax

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

Values

This property is specified as one of the following keyword values:

auto: A new stacking context is created only if one of the properties applied to the element requires it.
isolate: A new stacking context must be created.

Formal definition

Initial value	auto
Applies to	All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Inherited	no
Computed value	as specified
Animation type	Not animatable

Formal syntax

isolation = 
  auto |
  isolate

Examples

Forcing a new stacking context for an element

HTML

<div class="big-square">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>

CSS

.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: lime;
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: lime;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}

Result

Specifications

Specification
Compositing and Blending Module Level 2 # isolation

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`isolation`	41	79	36	28	8	41	36	28	8	4.0	41	8
`auto`	41	79	36	28	8	41	36	28	8	4.0	41	8
`isolate`	41	79	36	28	8	41	36	28	8	4.0	41	8