Knockout/cutout text effect with grandparent

Question

Is there a way to do a knockout text effect using mix-blend-mode with grandparent instead of parent?

• The :grandparent is just an example of what I am trying to do

Here is my html and css:

<span class="screen">lorem</span>

.screen {
    color: black;
    mix-blend-mode: screen;
    background-color: inherit:grandparent;
  }

Answer 1

mix-blend-mode:multiply; is your friend. For getting the grandparent's background color, the best you can do is inherit it.

.screen {
  color:white;
  background-color:black;
  mix-blend-mode:multiply;
  font-size:50px;
}
.container{
  background:inherit;
}
.grandparent {
  background: linear-gradient(90deg, red, green);
  width:fit-content;
}

<div class="grandparent">
<div class="container">
  <span class="screen">lorem</span>
</div>
</div>