Widely availableSupported across all major browsers. Safe to use in production.
Effects Widely available

isolation

The isolation CSS property creates a new stacking context, which impacts z-index ordering and blend modes.

Effects

Overview

The isolation CSS property creates a new stacking context, which impacts z-index ordering and blend modes.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
isolation
41
79
36
8
41
8
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.blend-container {
  isolation: isolate;
}

.blend-container .overlay {
  mix-blend-mode: multiply;
  /* The blending effect is confined to the .blend-container */
}

Live demo

Isolation: Auto( with)

isolation property Isolation: auto( with) demo.

PreviewFullscreen

Isolation: Isolate(limited)

isolation property Isolation: isolate(limited) demo.

PreviewFullscreen

Practical Example: cardinsidelimited

isolation property Practical example: cardinsidelimited demo.

PreviewFullscreen

Use cases

  • Using isolation

    The isolation CSS property creates a new stacking context, which impacts z-index ordering and blend modes.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features