isolation Property

The isolation property controls whether an element creates a new stacking context that isolates its contents from the blend effects of elements outside the isolated group.

isolation: isolate creates a new stacking context without any visual effect. Its only purpose is to prevent blend modes inside the element from affecting elements outside it.

Without isolation, mix-blend-mode blends with ALL underlying elements in the same stacking context — including the page background and other components. This causes unintended blending across component boundaries.

A card with a blend mode that should not affect the global background:

Other properties that implicitly create a stacking context (thus isolating blend modes):

• opacity less than 1
• transform other than none
• filter other than none
• will-change on certain properties

isolation: isolate is the intentional, no-side-effect option.

isolation: auto (default) does not create a new stacking context. Blend modes leak outward unless another property happens to create one.

z-index alone does not create a stacking context unless paired with a non-static position. isolation: isolate is the explicit, side-effect-free way to create a stacking context.

In SVG, isolation controls whether blend modes are applied within the SVG viewport or continue to affect underlying HTML content. Setting it on an SVG element keeps SVG blending self-contained.

As a best practice, apply isolation: isolate to every major UI component container to prevent blending from leaking:

If a blend mode is affecting unexpected elements, the cause is usually missing isolation. Add isolation: isolate to the closest common ancestor of the blending components to contain the effect.

isolation: isolate creates a new stacking context and thus a new compositor layer. This is generally lightweight — much cheaper than will-change: transform layer promotion.

isolation: isolate creates a new stacking context without visual side effects — its only purpose is to contain mix-blend-mode effects within a component boundary. Apply it to all major UI component containers to prevent blend modes from accidentally affecting the global background or sibling components. It is the intentional, clean alternative to using opacity or transform as an accidental isolation mechanism.