Here are two potential solutions:
If maintaining the structure of <div> and <span> is crucial for your CSS animation, you could implement three separate smaller gradients for each individual letter.
.gradient-text {
font-size: 24px;
font-weight: bold;
display: inline-block;
}
.gradient-text div {
display: inline;
color: black;
}
.gradient-text #letterL {
background: linear-gradient(to right, blue, #4d00b2);
-webkit-background-clip: text;
color: transparent;
}
.gradient-text #letterE {
background: linear-gradient(to right, #4d00b2, #92006d);
-webkit-background-clip: text;
color: transparent;
}
.gradient-text #letterB {
background: linear-gradient(to right, #92006d, red);
-webkit-background-clip: text;
color: transparent;
}
<div class="gradient-text">
<div><span>A</span></div>
<div><span>P</span></div>
<div><span>P</span></div>
<div><span id="letterL">L</span></div> <!-- Start of the range -->
<div><span id="letterE">E</span></div>
<div><span id="letterB">B</span></div> <!-- End of the range -->
<div><span>A</span></div>
<div><span>L</span></div>
<div><span>L</span></div>
</div>
If you can group the letters within the same affected element, the gradient will apply to all letters in that element.
2a) Utilizing the existing <div>, <span>, and gradient:
.gradient-text {
font-size: 24px;
font-weight: bold;
display: inline-block;
}
.gradient-text div {
display: inline;
color: black;
}
.gradient-text div:nth-child(n+4):nth-child(-n+4) span {
/* Targets letters L to B */
background: linear-gradient(to right, blue, red);
-webkit-background-clip: text;
color: transparent;
}
<div class="gradient-text">
<div><span>A</span></div>
<div><span>P</span></div>
<div><span>P</span></div>
<div><span>L E B</span></div> <!-- Range: 4th-4th child (only this one) -->
<div><span>A</span></div>
<div><span>L</span></div>
<div><span>L</span></div>
</div>
2b) Introducing a wrapper and utilizing background-image:
.gradient-text {
font-size: 24px;
font-weight: bold;
display: inline-block;
}
.gradient-text div {
display: inline;
color: black;
}
.gradient-text #gradient >* {
/* Targets letters L to B */
background-image: linear-gradient(to right, blue, red);
background-attachment: fixed;
-webkit-background-clip: text;
color: transparent;
background-size: 10%;
background-position: 10%;
}
<div class="gradient-text">
<div><span>A</span></div>
<div><span>P</span></div>
<div><span>P</span></div>
<div id="gradient">
<div><span>L</span></div> <!-- Start of the range -->
<div><span>E</span></div>
<div><span>B</span></div> <!-- End of the range -->
</div>
<div><span>A</span></div>
<div><span>L</span></div>
<div><span>L</span></div>
</div>