Skip to content
Visuals and effects

isolation

Creates a new stacking context so descendants do not blend with content outside the component.

28 effects in the catalog use this property.

Syntax

isolation: isolate | auto;

Watch out

This is the clean way to contain a component that uses `mix-blend-mode`; it avoids hacks such as `opacity: .999`.

Effects using isolation

These are working effects from the catalog. Open a tile to inspect the full source.