W3docs
en
Log in

CSS isolation Property

Use isolation property which allows to create a new stacking context. Learn about property values and see examples.

The isolation property allows you to create a new stacking context. It is commonly used alongside the mix-blend-mode property.

When using background-blend-mode, the isolation property is not needed because background layers only blend with each other, not with the page content behind them.

Info

In CSS, the isolation property is primarily used to isolate mix-blend-mode or filter effects, preventing them from affecting parent or child stacking contexts.

Initial Valueauto
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM SyntaxObject.style.isolation = "isolate";

Syntax

CSS isolation syntax

isolation: auto | isolate | initial | inherit;

Example of the isolation property:

CSS isolation code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        background-color: #ccc;
      }
      #isolation-example {
        width: 300px;
        height: 300px;
      }
      .c {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        padding: 10px;
        mix-blend-mode: difference;
      }
      #isolation-example1 {
        isolation: auto;
      }
      #isolation-example2 {
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div id="isolation-example" class="a">
      <div id="isolation-example1">
        <div class="a c">isolation: auto;</div>
      </div>
      <div id="isolation-example2">
        <div class="a c">isolation: isolate;</div>
      </div>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS isolation another

Example of the isolation property with the mix-blend-mode property:

CSS isolation another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #eee;
        color: #555;
        font-size: 1.1em;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .isolation-example {
        margin: 1em auto;
        width: 100%;
        max-width: 814px;
        position: relative;
      }
      img {
        width: 100%;
      }
      .isolation-example h1 {
        position: absolute;
        top: 5em;
        color: white;
        text-align: center;
        font-size: 40px;
        width: 100%;
        text-transform: uppercase;
        background-color: #000;
        padding: .5em .25em;
        mix-blend-mode: overlay;
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div class="isolation-example">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree." />
      <div class="element">
        <h1>House</h1>
      </div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
autoNo new stacking context is created unless other properties (like mix-blend-mode or filter) require one. This is the default value.
isolateCreates a stacking context on an element, and isolates the group.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

What does the 'isolation' property in CSS do?