isolation

The isolation property in CSS is used to prevent elements from blending with their backdrops.

.module {
  isolation: isolate;
}

It is most commonly used when mix-blend-mode has been declared on another element. Applying isolation to the element guards that element so that it does not inherit the mix-blend-mode applied to the other elements that might be behind it.

In other words, if mix-blend-mode is telling overlapping elements to blend with one another, then isolation creates an exemption on the elements where it’s applied. It’s like a way to turn off mix-blend-mode, but from a parent element rather than needing to select the element with blending directly.

Values

• isolate: Does exactly what it says. It protects the element from blending into other elements that are in the backdrop.
• auto: Resets the isolation and allows the element to blend into its backdrop.

See the Pen Isolation Cha-Cha-Cha by CSS-Tricks (@css-tricks) on CodePen.

A Use Case

Maria Antonietta Perna, writing for SitePoint, created a demo that drives the point home particularly well. We created this graphic to help explain her demo:

See the Pen Text/Image blend with mix-blend-mode by SitePoint (@SitePoint) on CodePen.

Where it doesn’t work

You might expect isolation to isolate elements when background-blend-mode is used, but that’s not the case. Background elements are already isolated by their nature in that they do not blend with the content that is behind them.

Another spot where isolation seems to be invalidated is when it is used in conjunction with translate on the same element. You might bump into this if you attempt to center an element both vertically and horizontally using absolute positioning and translate together:

.module {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  isolation: isolate;
}

The use of translate appears to isolate the element on its own without the use isolation.

Related

• mix-blend-mode
• background-blend-mode

More Information

• W3C specification
• isolation on MDN
• isolation on Codrops
• SitePoint: A Close-up Look at the CSS mix-blend-mode Property

Browser Support for isolate

Can I Use… Browser Support for mix-blend-mode