isolation
A property that creates a new stacking context. Mainly used to prevent mix-blend-mode from bleeding outside the parent.
Class List
| Class | CSS | Description |
|---|---|---|
iso | isolation: auto | Default. Does not create a new stacking context |
ison | isolation: isolate | Creates new stacking context. Isolates blend-mode |
Visual Comparison
Compares the effect of ison on elements with mix-blend-mode applied.
No isolation -- iso
Blend affects parent background
isolation: isolate — ison
Blend applies only within ison container
When to Use?
| Situation | Recommended | Reason |
|---|---|---|
| blend-mode bleeds outside parent | ison | Isolate with stacking context |
| Apply blend only inside card | ison | Apply to card container |
| Default behavior (no isolation needed) | iso | auto is the default |
Code Examples
<!-- mix-blend-mode isolation -->
<div class="ison pr bg18181B p2rem br8px">
<div class="w8rem h8rem bgEF4444 br8px mbmm"></div>
<div class="w8rem h8rem bg22C55E br8px mbmm neg-mt2rem ml2rem"></div>
<!-- blend applies only within the ison container -->
</div>
<!-- Independent blend in multiple cards -->
<div class="dg gtcr2-1fr gap2rem">
<div class="ison pr bg27272A p2rem br8px">
<div class="w100p h8rem bg6366F1 br4px mbms"></div>
</div>
<div class="ison pr bg27272A p2rem br8px">
<div class="w100p h8rem bgEF4444 br4px mbmo"></div>
</div>
</div>Tips & Notes
ison = new stacking context
ison creates a new stacking context similar to z-index. Isolates child elements' blend-mode from propagating upward.
Always use with mix-blend-mode
isolation has no visual effect on its own. It is meaningful when limiting the scope of mix-blend-mode.