CSS isolation Property


The CSS isolation property specifies whether an element must create a new stacking context. A stacking context is a three-dimensional space where elements are positioned and rendered. When an element creates a new stacking context, it becomes isolated from other elements in the document, meaning that it cannot be blended with other elements or affected by their z-index values. The isolation property is most commonly used in conjunction with the background-blend-mode property. background-blend-mode allows you to specify how the background of an element is blended with the backgrounds of other elements behind it. However, background-blend-mode only works within stacking contexts. This means that if you want to blend the background of an element with the backgrounds of other elements, you must first set the isolation property to isolate.

Initial value
Applies to
All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Computed value
as specified
JavaScript syntax


isolation: auto | isolate


  • autoA new stacking context is created only if one of the properties applied to the element requires it.
  • isolateA new stacking context must be created.


<div class="big-square ">
<div class="isolation-auto">
<div class="small-square">auto</div>
<div class="isolation-isolate">
<div class="small-square">isolate</div>
.isolation-auto {
  isolation: auto;

.isolation-isolate {
  isolation: isolate;

.big-square {
  background-color: rgb(0, 255, 0);
  width: 200px;
  height: 210px;

.small-square {
  background-color: rgb(0, 255, 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;

Browser Support

The following table will show you the current browser support for the CSS isolation property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023