Isolation Property
Last updated: 2026-09-13
isolation Isolation Property
The isolation property controls whether an element creates a new stacking context. When set to isolate, the element forms an independent blending environment so that its children's mix-blend-mode blends only with content inside the element, never leaking to elements outside. It is a key property for precisely controlling the scope of blend modes.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
isolation: auto | isolate;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | isolate | Keyword | Whether to create a new stacking context |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| isolation | ✓ v43 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v30 |
| Supported in all major browsers | |||||
Tip： The most common use of isolate is together with mix-blend-mode, preventing blending from leaking onto elements you do not want affected.
❓ FAQ
QWhich CSS properties create a stacking context in the browser?
ACommon ones: position plus a non-auto z-index, opacity below 1, a non-none transform, a non-none filter, a non-normal mix-blend-mode, and will-change. isolation: isolate creates a stacking context deliberately, keeping blending and stacking isolated inside itself.
QWhat is the difference between isolation: auto and isolation: isolate?
Aauto does not create a stacking context on its own: the element joins its parent's stacking environment, so its children's mix-blend-mode can reach past it and blend with content further out. isolate forces a new stacking context, limiting the blend scope to the element: children blend only with content inside it and never leak outside. Use isolate when you need precise control over the blend boundary.
QBesides blend modes, does isolation: isolate have other uses?
AAnywhere stacking relationships need isolating: preventing children's blend modes from affecting outside elements, limiting the scope of z-index comparisons, keeping internal positioning and layering from interfering with the outside, and pairing with contain: paint to optimize rendering. In essence, isolate offers a clean way to create a stacking context without relying on z-index or opacity.
QWhat is the difference between the isolation property and z-index?
Az-index can only be set on positioned elements and adjusts stacking order — a larger value stacks higher. isolation: isolate does not change the top-to-bottom order of elements; it creates an isolation boundary that separates internal stacking from the outside. Both involve stacking contexts, but z-index decides who is on top, while isolation decides where the boundary is.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
