Isolation

Class reference

Using the isolation property determines whether an element must create a new stacking context, this can be used along side mix-blend-mode utility classes to limit the blending effect to the isolation group.

Does not affects backdrop

.isolation-isolate

Does affects backdrop

.isolation-auto

<!-- Isolate -->
<div class="relative isolation-isolate">
  <img class="blend-multiply" src="..." alt="...">
  <p class="blend-overlay ...">Does not affects backdrop</p>
</div>
<!-- Auto -->
<div class="relative isolation-auto">
  <img class="blend-multiply" src="..." alt="...">
  <p class="blend-overlay ...">Does affects backdrop</p>
</div>

# Responsive

To control the isolation mode of an element at a specific breakpoint, add a {screen}: prefix to any existing isolation mode utility. For example, use md:isolation-isolate to apply the isolation-isolate utility at only medium screen sizes and above.

<div class="isolation-auto md:isolation-isolate"">
  <img class="blend-multiply" src="..." alt="...">
</div>

# Hover

To control the isolation mode of an element on hover, add the hover: prefix to any existing isolation mode utility. For example, use hover:isolation-isolate to apply the isolation-isolate utility on hover.

<div class="isolation-auto hover:isolation-isolate"">
  <img class="blend-multiply" src="..." alt="...">
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.