How to ignore background color when using mix-blend-mode in CSS

2020-03-11

The isolation: isolate CSS declaration can be used to force an element to create a new context for mix-blend-mode, thus background colors of elements further up the tree will be ignored when using mix-blend-mode.

In the graphic below, the two images are set to have mix-blend-mode: difference and the background-color of the example container is set as well. However, the second image is wrapped with an element to which isolation: isolate applies and therefore this image ignores the background-color of the parent container when applying the mix-blending effect as the image is in a new stacking context.

The HTML looks like this:

<div id="example-isolate">
  <div class="non-isolate" tabindex="0">
    <img class="mix-blend-mode-difference" src="housey.png">
  </div>
  <div class="isolate" tabindex="0">
    <img class="mix-blend-mode-difference" src="housey.png">
  </div>
</div>

And the CSS looks like this:

#example-isolate {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-around;
  background-color: burlywood;
}
#example-isolate .mix-blend-mode-difference {
  mix-blend-mode: difference;
}
#example-isolate .isolate {
  isolation: isolate;
}
#example-isolate div img {
  transition: transform 1s;
}
#example-isolate div:hover img {
  transform: translateY(-117px);
}