CSS isolation Property

Definition and Usage

The isolation property decides whether an element must create a new stacking context. With isolate, it always does. With auto (the default), a stacking context appears only if another property on that element requires one.

It is most useful with mix-blend-mode: put isolation: isolate on a wrapper so children blend inside the group instead of with content behind it. It also matters for z-index ordering inside that context. It applies to all elements, is not inherited, and is not animatable.

CSS Syntax

Only two keywords matter in practice: auto and isolate.

Property Values

How to Use isolation

Wrap blended content, then force a stacking context when you need to contain the blend.

1. Build the visual group (background + children that use mix-blend-mode).
2. Put those children inside a wrapper.
3. Set isolation: isolate on the wrapper to contain blending—or leave auto if blending with the backdrop is intentional.
4. Check the result against the parent background; switch between auto and isolate to see the difference.

Live Preview

Same lime background and mix-blend-mode: difference square. Toggle isolation on the wrapper.

CSS Examples

Each snippet keeps only what isolation needs. Use Try It Yourself for a live editor.

<style>
  .bg { background: lime; padding: 2em; }
  .wrap { isolation: auto; }
  .box {
    background: lime;
    mix-blend-mode: difference;
    width: 100px;
    height: 100px;
  }
</style>

<div class="bg">
  <div class="wrap">
    <div class="box">auto</div>
  </div>
</div>

<style>
  .bg { background: lime; padding: 2em; }
  .wrap { isolation: isolate; }
  .box {
    background: lime;
    mix-blend-mode: difference;
    width: 100px;
    height: 100px;
  }
</style>

<div class="bg">
  <div class="wrap">
    <div class="box">isolate</div>
  </div>
</div>

<style>
  .bg { background: lime; padding: 1em; }
  .auto { isolation: auto; }
  .isolate { isolation: isolate; }
  .box {
    background: lime;
    mix-blend-mode: difference;
    width: 80px;
    height: 80px;
  }
</style>

<div class="bg">
  <div class="auto"><div class="box">auto</div></div>
  <div class="isolate"><div class="box">isolate</div></div>
</div>

Key Takeaways