isolation

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

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 value	auto
Applies to	All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Inherited	no
Media	visual
Computed value	as specified
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

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

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

Values

auto

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

isolate

Is a keyword indicating that a new stacking context must be created.

Formal syntax

auto | isolate

Examples

<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</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;
}

Specifications

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

Browser compatibility

See also

• <blend-mode>
• mix-blend-mode, background-blend-mode