isolation
Defines whether an element must create a new stacking context. This is useful for preventing mix-blend-mode or z-index from affecting elements outside of a specific container.
Quick example
.widget-container {
isolation: isolate;
/* prevents children with blend modes from bleeding into the page background */
}Quick facts
Initial value
autoInherited
No
Applies to
all elements, SVG container, graphics, and graphics-referencing elements
Animation type
notAnimatable
Values
autoisolate isolation Browser Support
Widely available Since 2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
41+
36+
8+
79+