MDN wants to learn about developers like you:

The isolation CSS property defines if the element must create a new stacking context.

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

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

This especially useful in conjunction with background-blend-mode that only blend background in a given stacking context: it allows to isolate groups of elements from their deeper background and to blend their background color together.

Initial valueauto
Applies toAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar


One of the keyword values listed below.


Is a keyword indicating that a new stacking context has to be created only if one properties applied to the element requires it.
Is a keyword indicating that a new stacking context must be created.

Formal syntax

auto | isolate


<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  <div id="e">
    <div class="a c">isolate</div>
.a {
  background-color: rgb(0,255,0);
#b {
  width: 200px;
  height: 210px;
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
#d {
  isolation: auto;
#e {
  isolation: isolate;


Specification Status Comment
Compositing and Blending Level 1
The definition of 'Isolation' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support


36 (36) No support 30 7.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support


36.0 (36) No support 36 8.0

See also

Document Tags and Contributors

 Contributors to this page: wbamberg, shvaikalesh, mrstork, teoli, Sebastianz, fscholz, Jeremie, jpmedley
 Last updated by: wbamberg,