Skip to main content
Dublin Library

The Publishing Project

What does isolation do in CSS?

 

The isolation property provides a way for an element to create a stacking context without using any special technique to do so.

Creating new stacking orders prevent an element from acquiring blend-modes from elements in the backdrop.

The following example demonstrate how isolation works with mix-blend-mode

In the example there are two elements with a magenta background. The only difference is the isolation declaration.

The first box with class isolation-auto sets isolation to auto, the default value. This let's the background through, blending it with the background color.

The second box with class isolation-isolate. This will prevent the background image in the parent element from blending through.

You can find a more technical explanation in the Compositing and Blending Level 2 specification

Edit on Github