What does CSS isolation: isolate do?

isolation: isolate forces an element to create a new stacking context. This sandboxes all z-index values and mix-blend-mode effects within the element — preventing them from interacting with elements outside. It is the cleanest way to create a stacking context because it has no visual side effects, no compositing overhead, and makes the intent explicit in the code.

What is the difference between isolation: auto and isolation: isolate?

isolation: auto (the default) means no new stacking context is created unless another property forces one (opacity, transform, filter, etc.). Children's z-index and mix-blend-mode interact globally with the surrounding page. isolation: isolate unconditionally creates a new stacking context, so children's z-index only competes within the element and mix-blend-mode blends against the element's background rather than bleeding through to the page.

What is a CSS stacking context?

A stacking context is an independent layer in CSS rendering. Elements within the same stacking context compete for z-index ordering. Elements in different stacking contexts are composited separately — their z-index values do not interact. The root html element creates the global stacking context. isolation: isolate creates a nested stacking context within a component.

Why is isolation: isolate better than transform: translateX(0) for creating a stacking context?

Both create a stacking context, but transform: translateX(0) does so as a side effect and promotes the element to a GPU compositing layer, consuming extra memory. isolation: isolate only creates the stacking context with no compositing layer, no GPU memory cost, and makes the intent readable in the code. Future developers (and you) will understand exactly why the property is there.

How does isolation: isolate stop mix-blend-mode from bleeding through?

mix-blend-mode blends an element against the content beneath it within the same stacking context. When a component has isolation: isolate, it creates a new stacking context boundary. The blend mode of child elements resolves against the isolated component's background instead of the page background or elements underneath the component.

What browsers support CSS isolation?

CSS isolation is supported in Chrome 41+ (2015), Firefox 36+ (2015), Safari 8+ (2014), Edge 79+, and iOS Safari 8+. This means effectively 100% of modern browsers. No fallback or polyfill is needed.

CSS isolation Property Guide

Master CSS isolation: isolate — sandbox z-index, contain blend modes, isolate components, and understand all stacking context triggers

All processing happens in your browser. No data is sent to any server.

`isolation: isolate` — Creates new stacking context

Behavior

Creates a new stacking context unconditionally. Children's z-index and mix-blend-mode are resolved within this context. Blending stops at the boundary — children cannot blend with elements outside the isolated element.

Use Case

Preventing mix-blend-mode from bleeding outside a component, sandboxing z-index so child modals/dropdowns cannot escape a widget, or ensuring a component's stacking order is self-contained.

isolation: isolate is the only property that creates a stacking context purely for isolation purposes — it does not trigger compositing, transform, or any other side effects.

Example

.component {
  isolation: isolate;
}

mix-blend-mode Containment Demo

Toggle isolation: isolate on the white component to see how blend mode containment works.

Page background (gradient)

.component { isolation: auto }

mix-blend-mode: multiply

Bleeds through to page gradient → different color

Without isolation — the orange box bleeds through to the gradient page background.

You added mix-blend-mode: multiply to a section overlay, and now it’s blending with everything underneath — the navbar, the footer, even elements in other sections. Or a component’s z-index: 999 tooltip is appearing above your modal. Both problems have the same root cause: missing stacking context boundaries. isolation: isolate creates one with a single property — no transform: translateZ(0) hack, no position: relative; z-index: 0 workaround.

Why This Guide (Not Just Adding isolation: isolate Everywhere)

isolation is a one-value property, but understanding when to use it requires understanding stacking contexts — which CSS properties create them, how z-index resolves within vs across contexts, and why mix-blend-mode bleeds through without containment. This guide covers all of that with interactive demos, an analyzer that identifies stacking context issues in your CSS, and a generator for common isolation patterns. Everything runs in your browser.

What is the isolation Property?

isolation has two values: auto (the default) and isolate. Its primary purpose is to contain mix-blend-mode effects and z-index within a component — preventing them from “bleeding out” to affect the surrounding page.

/* Default — no new stacking context */
.element { isolation: auto; }

/* Create a stacking context unconditionally */
.component { isolation: isolate; }

The key difference from other stacking context triggers (like opacity: 0.99 or transform: translateX(0)) is that isolation: isolate only creates a stacking context — it does not trigger compositing, does not affect rendering performance, and has no visual side effects.

The Two Values

isolation: auto

auto is the initial value. The element will not create a new stacking context unless another property forces one (opacity, transform, filter, etc.). This is correct for the vast majority of elements.

.normal-element {
  isolation: auto; /* No new stacking context */
}

With auto, children’s mix-blend-mode blends against anything below the element in the stacking order — including the page background, images behind the element, or sibling elements.

isolation: isolate

isolate forces a new stacking context to be created on the element, regardless of any other properties. This is the value you reach for when you need:

mix-blend-mode on a child to blend only against the component background, not bleed through to the page
z-index values inside a component to stay sandboxed within that component
A component’s layering to be self-contained and predictable in any context

.component {
  isolation: isolate;
  background: white;
}

.component__image {
  mix-blend-mode: multiply;
  /* Now blends against .component's white background */
  /* NOT against the page or elements underneath .component */
}

What is a Stacking Context?

A stacking context is an independent rendering layer in CSS. Elements in different stacking contexts are composited (painted) separately. When a new stacking context is created:

The element and all its descendants form a self-contained group
z-index values inside only compete with each other, not with the global page
mix-blend-mode on children blends against the element’s background, not outside elements
The entire group is painted as a single unit relative to the parent stacking context

The root <html> element always creates the global stacking context. Every other stacking context is nested within it.

What Creates a Stacking Context?

Beyond isolation: isolate, many CSS properties implicitly create stacking contexts as a side effect of their rendering requirements:

Property / Condition	Example
`position` (not static) + `z-index` ≠ `auto`	`position: relative; z-index: 1;`
`opacity` < 1	`opacity: 0.99;`
`transform` ≠ `none`	`transform: translateX(0);`
`filter` ≠ `none`	`filter: blur(0px);`
`backdrop-filter` ≠ `none`	`backdrop-filter: blur(10px);`
`mix-blend-mode` ≠ `normal`	`mix-blend-mode: multiply;`
`will-change` (composited prop)	`will-change: transform;`
`contain: layout \| paint \| strict \| content`	`contain: layout;`
`clip-path` ≠ `none`	`clip-path: inset(0);`
Flex/grid child + `z-index` ≠ `auto`	`z-index: 1;` (child of flex)

The problem with implicit stacking context triggers is that they are side effects — you add transform for animation and inadvertently create a stacking context. isolation: isolate makes the intent explicit and keeps the code maintainable.

Common Patterns

1. Containing mix-blend-mode

This is the original motivation for isolation. Without it, mix-blend-mode: multiply on an image will blend with the page background:

/* Problem: image bleeds through card to page background */
.card { background: white; }
.card img { mix-blend-mode: multiply; }

/* Fix: isolate the card */
.card {
  isolation: isolate;
  background: white;
}
.card img {
  mix-blend-mode: multiply;
  /* Blends against white card bg — not the page */
}

2. Z-Index Sandboxing

Prevents the z-index “arms race” where components keep increasing their z-index values trying to appear above each other:

/* Without isolation: z-index competes globally */
.widget .dropdown { z-index: 9999; }
.modal { z-index: 10000; }

/* With isolation: z-index is sandboxed */
.widget { isolation: isolate; }
.widget .dropdown { z-index: 50; } /* Scoped to .widget */
.modal { z-index: 100; } /* Separate context — always wins */

3. Component Isolation

Make reusable components predictable in any context:

/* Component root — self-contained stacking */
.date-picker {
  isolation: isolate;
  position: relative;
}

.date-picker__calendar {
  position: absolute;
  z-index: 10; /* Only competes inside .date-picker */
  top: 100%;
}

4. Explicit vs. Accidental Stacking Contexts

When you add transform for animation, you accidentally create a stacking context. Declaring isolation: isolate makes the intent clear:

/* Accidental stacking context */
.animated-card {
  transition: transform 0.2s;
}
.animated-card:hover {
  transform: translateY(-4px); /* Side effect: stacking context */
}

/* Explicit + accidental: clear intent, same behavior */
.animated-card {
  isolation: isolate; /* Intentional stacking context */
  transition: transform 0.2s;
}
.animated-card:hover {
  transform: translateY(-4px);
}

How isolation Differs from Other Approaches

Approach	Creates Stacking Context	Visual Side Effect	Compositing Layer
`isolation: isolate`	Yes	None	No
`opacity: 0.99`	Yes	Slightly transparent	Yes
`transform: translateX(0)`	Yes	None	Yes
`will-change: transform`	Yes	None	Yes (pre-allocated)
`position: relative; z-index: 1`	Yes	None	No

isolation: isolate is the cleanest approach because it only creates a stacking context with no rendering side effects and no unnecessary compositing layers.

Debugging with Browser DevTools

When debugging stacking context issues in Chrome DevTools:

Elements panel → Select the element → Layers tab to see compositing layers
Look for the purple “Promoted Layer” indicator in the Elements panel
In Firefox DevTools, 3D View (under Layout) shows the stacking context hierarchy visually

Common symptoms that suggest a missing isolation: isolate:

mix-blend-mode bleeds through to the page background
A child element’s z-index: 9999 still appears behind something
A dropdown inside a card appears behind a page-level element

Browser Support

isolation has excellent support across all modern browsers:

Browser	Version	Support
Chrome	41+	Full
Edge	79+	Full
Firefox	36+	Full
Safari	8+	Full
iOS Safari	8+	Full

Browser support is effectively 100% for any modern web application. There is no need for fallbacks.

Frequently Asked Questions

Does isolation: isolate affect performance? No. Unlike transform: translateX(0) or will-change: transform, isolation: isolate does not promote the element to its own compositing layer. It creates a stacking context purely in the CSS stacking model without GPU compositing overhead.

Why use isolation: isolate instead of z-index? z-index only works on positioned or flex/grid children and it competes globally within the nearest stacking context. isolation: isolate creates a new stacking context so that z-index values inside the element are scoped and predictable regardless of what other z-index values exist on the page.

Does isolation affect accessibility or semantics? No. isolation is a purely visual CSS property. It has no effect on the DOM, focus order, keyboard navigation, screen reader output, or any other accessibility-related behavior.

Can I combine isolation: isolate with other properties? Yes. isolation: isolate stacks with any other CSS properties. If an element already has opacity < 1 or transform (which create their own stacking context), adding isolation: isolate is redundant but harmless and still communicates intent clearly in the code.

What is the difference between isolation and contain? contain: layout and contain: paint both create stacking contexts as part of a broader containment model that also restricts how layout, paint, and size are calculated. isolation: isolate only affects stacking context — it does not restrict layout or paint containment. Use contain for performance optimization; use isolation purely for stacking/blending containment.