isolation

isolation:isolate creates a stacking context. It is useful for keeping decorative blends inside an intended group without changing the group’s opacity or transforming it.

Stop blending with the outer backdrop

The outer area is amber. The blue square uses multiply. With auto, it can blend with the amber backdrop; with isolate, the transparent group creates its own boundary, so the square does not blend with that outer amber.

<div class="outer">
  <p>Auto</p>
  <div class="group"><div class="square" aria-hidden="true"></div></div>
  <p>Isolate</p>
  <div class="group isolated">
    <div class="square" aria-hidden="true"></div>
  </div>
</div>

.outer {
  background: #fbbf24;
  padding: 1rem;
}
.group {
  border: 1px solid #172554;
  padding: 0.75rem;
  margin-block: 0.5rem;
}
.isolated {
  isolation: isolate;
}
.square {
  width: 80px;
  height: 60px;
  background: #2563eb;
  mix-blend-mode: multiply;
}

Keep a local negative layer behind its content

The isolated group keeps its negative-z-index decoration inside its own stacking context. It is painted above the group’s background and behind its text, rather than disappearing behind an ancestor’s surface.

<p class="note">This text remains above its local decorative layer.</p>

.note {
  position: relative;
  isolation: isolate;
  padding: 1.5rem;
  background: #eff6ff;
}
.note::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  z-index: -1;
  background: #bfdbfe;
}

Values and defaults

The initial value is auto and the property is not inherited. Auto does not force a new stacking context, although another property may create one. Isolate forces one. It does not clip descendants or isolate CSS selectors, IDs, forms, or scripts.

Common mistakes

A large child z-index cannot escape its parent stacking context to beat another group above it. Isolation is not a containing-block substitute, and it is not a security sandbox. Learn z-index, mix-blend-mode, and position.

Sources and browser support

MDN: isolation describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

Compositing and Blending specification defines the isolation boundary.