Is there a way to add a drop shadow on text and make the part of the shadow that's inside the text disappear or 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 with adding shadow is that it covers the background:
*/
.withShadow {
text-shadow: 1px 1px 1px black;
}<span class="mask">My Text</span>
<span class="mask withShadow">My Text</span>When adding shadow, most of it appears inside the transparent text. Is there a CSS or Javascript solution to eliminate the shadow inside the text?
Thank you!