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(0 0 10px #ff003c)
  drop-shadow(0 0 20px rgba(255, 0, 60, 0.5))
  drop-shadow(0 0 40px #ff003c);
}

hr {
  margin: 2em 0;
}

<span class="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span>
<hr>
<span class="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: 20px 50px 0 red,150px -20px 0 blue,-20px 20px 0 green;
}

.f {
 filter: drop-shadow(20px 50px 0 red) drop-shadow(150px -20px 0 blue) drop-shadow(-20px 20px 0 green);
}

<div class="box s">some shadow</div>

<div class="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(0 0 0 transparent)
          drop-shadow(0 0 10px #ff003c) 
          drop-shadow(0 0 20px rgba(255, 0, 60, 0.5));
}

hr {
  margin: 2em 0;
}

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