Is It Possible To Treat Multiple Elements As One Text When Applying Css Text-shadow?

When applying CSS text-shadow to an element that has its text content partially wrapped in child elements, the letters after the wrapped text will throw a shadow on the wrapped ele

Solution 1:

You can consider drop-shadow() filter but pay attention as it doesn't work the same as text-shadow. Filter are cumulated and not applied seperately:

* {
  font-family: sans-serif;
  font-weight: 900;
}

.shadow {
  color: #ffd9e2;
  font-size: 3rem;
 filter:
  drop-shadow(0010px#ff003c)
  drop-shadow(0020pxrgba(255, 0, 60, 0.5))
  drop-shadow(0040px#ff003c);
}

hr {
  margin: 2em0;
}

<spanclass="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span><hr><spanclass="shadow">This text consists of one single element</span>

To better illustrate the effect of multiple drop-shadow() filter:

.box {
  padding:50px;
  font-size:30px;
  font-weight:bold;
}
.s {
 text-shadow: 20px50px0 red,150px -20px0 blue,-20px20px0 green;
}

.f {
 filter: drop-shadow(20px50px0 red) drop-shadow(150px -20px0 blue) drop-shadow(-20px20px0 green);
}

<divclass="box s">some shadow</div><divclass="box f">some filter</div>

You can clearly see how many shadows we have in the second example because each time we consider the previous and we duplicate it.

Solution 2:

You can use the drop-shadow() filter.

Demo:

* {
  font-family: sans-serif;
  font-weight: 900;
}

.shadow {
  color: #ffd9e2;
  font-size: 3rem;
  filter: drop-shadow(000 transparent)
          drop-shadow(0010px#ff003c) 
          drop-shadow(0020pxrgba(255, 0, 60, 0.5));
}

hr {
  margin: 2em0;
}

<spanclass="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span><hr><spanclass="shadow">This text consists of one single element</span>