2

I have a problem with mix-blend-mode on Chrome. It doesn't work properly. On the other hand on firefox and safari, it is working without problem. I want to achieve cutout text effect. Thanks for the help!

h1 {
  mix-blend-mode: screen;
  background: white;
  color: black;
}


body {
  background: url("https://images.unsplash.com/photo-1530518854704-23de978d2915?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a5e654b18d678b37850cefea5872008&auto=format&fit=crop&w=2477&q=80")
    no-repeat left / cover;
}

h1 {
  font-family: "Righteous", cursive;
  mix-blend-mode: screen;
  display: flex;
  flex-flow: column;
  padding: 0.5em;
  margin: 0;
  font-size: 6em;
  line-height: 0.95;
  background: white;
  color: black;
  text-transform: uppercase;
  max-width: max-content;
}
<h1>
  <span>Simple</span>
  <span>Cutout</span>
  <span>Heading</span>
  <span>Effect</span>
</h1>

Here is working code on codepen

Nitin Bisht
  • 5,053
  • 4
  • 14
  • 26
Lukas
  • 125
  • 6
  • 9

1 Answers1

4

Chrome has some problems with mix-blend-mode and body

use an intermediate div for the image

.base {
  background: url("https://images.unsplash.com/photo-1530518854704-23de978d2915?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a5e654b18d678b37850cefea5872008&auto=format&fit=crop&w=2477&q=80")
    no-repeat left / cover;
}

h1 {
  font-family: "Righteous", cursive;
  mix-blend-mode: screen;
  display: flex;
  flex-flow: column;
  padding: 0.5em;
  margin: 0;
  font-size: 6em;
  line-height: 0.95;
  background: white;
  color: black;
  text-transform: uppercase;
  max-width: max-content;
}
<div class="base">
<h1>
  <span>Simple</span>
  <span>Cutout</span>
  <span>Heading</span>
  <span>Effect</span>
</h1>
</div>
vals
  • 61,425
  • 11
  • 89
  • 138
  • Still an issue as of Chrome 79. It's as if `` is ignored from the `mix-blend-mode` calculation. For the workaround, using `body::after` is also an option – so to not have to edit the HTML. Demo: https://codepen.io/fabswt/pen/BaypwZx – Fabien Snauwaert Dec 18 '19 at 13:25
  • How silly that this has still not been resolved in 2021. Thanks for the workarounds to both of you! – Evan Jul 11 '21 at 21:33
  • Sometimes the Chrome team is unbelievable slow / deaf – vals Jul 12 '21 at 11:02