How to use CSS combination of mix-blend-mode and isolation?

Question

I have a parent element with a red background. I want an h2 element to blend just some words with the background, and other words, inside a span tag, no.

My example below is not working.
How to make it work?

.bg-red {
  background: red;
}

.blend {
  mix-blend-mode: difference;
  color: white;
}

.isolate {
  isolation: isolate;
}

<div class="bg-red">
  <div class="blend">
    <h2>This text should <span class="isolate">(This one shouldn't)</span> be blended 
    </h2>
  </div>
</div>

View on JSFiddle

Meg

A few notes: To add to Temani Afif's answer (which worked for me!) be sure to not use any z-index on the mix-blend-mode elements as they will no longer display correctly. I have also found that pseudo elements will also not inherit blend modes. – Acetous

Answer 1

In order to make it working you need to specify the isolation before applying the mix-blend-mode. So between the background and the text on where you will apply mix-blend-mode you need to have a wrapper where isolation is set.

Here is an example where the background is applied on the h2 and inside we have many span. We apply mix-blend-mode on them and we wrap the non-needed one with another wrapper where we apply isolation:

h2 {
  background: red;
}

h2 span {
  mix-blend-mode: difference;
  color: white;
}

.isolate {
  isolation: isolate;
  display: inline-block;
}

<h2>
  <span>This text should</span>
  <div class="isolate"><span>(This one shouldn't)</span></div>
  <span> be blended</span>
</h2>

But if you apply mix-blend-mode on the h2 you won't be able to isolate any of its content:

.red {
  background: red;
}

h2 {
  mix-blend-mode: difference;
}

h2 span {
  color: white;
}

.isolate {
  isolation: isolate;
  display: inline-block;
}

<div class="red">
  <h2>
    <span>This text should</span>
    <div class="isolate"><span>(This one shouldn't)</span></div>
    <span> be blended</span>
  </h2>
</div>

Cloistered

This does not make much sense to me, this way I could just ignore the isolate property and write this: h2 span:not(.isolate) { mix-blend-mode: difference; color: white; } – Meg

@raphadko yes you can :) i simply explained how the isolation work [how i understand it] ... i didn't focus on the html, but i focused on how it should be used in order to work – Cloistered

@raphadko the conclusion of this, is that if you already apply mix-blend-mode to parent element, you cannot remove it from child element using isolate – Cloistered