Effects
isolation
isolation sets whether an element is cut off as its own blending group. With isolate, mix-blend-mode on its children no longer blends with what lies behind the element.
Syntax
auto | isolatePreview
Code
.box {
background-color: transparent;
isolation: isolate;
}
.box > :nth-child(2) {
mix-blend-mode: multiply;
}Controls
About
How far a child’s mix-blend-mode reaches
mix-blend-mode blends an element with whatever is painted behind it. With the initial value, auto, that reaches past the parent box to things further back, such as the page background. Set isolation: isolate on the parent and only what the parent paints inside itself is blended with; nothing outside it is.
The preview here puts mix-blend-mode: multiply on the circle inside the box (its second child). With isolate, the circle darkens only where it overlaps the green square and stays plain blue elsewhere. Switch to auto and it also blends with the stripes and the red circle behind the box.
Other properties isolate too
An element that creates a stacking context is isolated even when isolation is auto: for example one with opacity below 1, a transform or filter other than none, or both position and z-index set. isolation: isolate is for creating that group without changing anything else about how the element looks.
Watch out
isolatealso creates a new stacking context, so thez-indexorder inside stays within the parent. That also keeps a child withz-index: -1from slipping behind the parent’s background.background-blend-mode, which blends background layers with each other, only ever blends inside the element, soisolationdoesn’t affect it.- The preview here gives the box a transparent background (
background-color: transparent) so the pattern behind it shows. The dashed frame marks the box.