Added text-shadow on an text with -webkit-background-clip: text

Question

I'm trying to add a drop shadow on this text, but it's always appearing inside the text. Is there a way to make the part of the shadow that's inside the text disppear/go behind the background image?

.mask {
  background-image: radial-gradient(purple, gold);
  background-size: cover;
  mix-blend-mode: luminosity;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  color: rgba(254, 185, 90, .3);
  font-size: 4em;
  font-family: impact;
  font-weight: bold;
}

/*
The issue comes when I try to add shadow to the text, because it covers the background:
*/

.withShadow {
  text-shadow: 1px 1px 1px black;
}

<span class="mask">My Text</span>
<span class="mask withShadow">My Text</span>

It creates a shadow, but since the text is (mostly) transparent, most of the shadow is inside the text. Is there a way to get rid of the part of the shadow that's inside the text, either with css or javascript?

Thanks!

score 0 · Answer 1 · answered Jul 27 '23 at 13:57

Possible workaround could be not using text-shadow but -webkit-text-stroke instead:

.mask {
  background-image: radial-gradient(purple, gold);
  background-size: cover;
  mix-blend-mode: luminosity;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  color: rgba(254, 185, 90, .3);
  font-size: 4em;
  font-family: impact;
  font-weight: bold;
}

.withShadow {
  -webkit-text-stroke: 1px black;
}

<span class="mask">My Text</span>
<span class="mask withShadow">My Text</span>

Added text-shadow on an text with -webkit-background-clip: text

1 Answers1