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

More Information

Browser Support for isolate

Chrome Safari Firefox Opera IE/Edge Android iOS
41 7.1 36 30 Nope 41 8.4

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

This browser support data is from Caniuse, which also reports this feature is in W3C Candidate Recommendation status.

Desktop

Google ChromeMozilla FirefoxInternet ExplorerOperaApple Safari
4132No297.1

Mobile / Tablet

iOS SafariAndroidOpera MobileAndroid ChromeAndroid Firefox
853375651

Comments

  1. User Avatar
    rytr
    Permalink to comment#

    tyutru

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag