Слоёная тень для текста · Hsla Layer

<style>
.text-shadow-red {
font-family:'Georgia';
font-size:7rem;
color:red;
text-shadow: 
0px 0px hsla(0, 30%, 60%, .5),
1px -1px hsla(0, 60%, 30%, .6),
2px -2px hsla(0, 30%, 60%, .7),
3px -3px hsla(0, 60%, 30%, .8),
4px -4px hsla(0, 30%, 60%, .9),
5px -5px hsla(0, 60%, 30%, 1.0);
}
</style>
<div class="text-shadow-red">Тень для текста</div>

<style>
.text-shadow-red-1 {
font-family:'Georgia';
font-size:7rem;
color:red;
text-shadow: 
0px 0px hsla(0, 50%, 90%, .5),
1px -1px hsla(0, 60%, 50%, .6),
2px -2px hsla(0, 70%, 90%, .7),
3px -3px hsla(0, 80%, 50%, .8),
4px -4px hsla(0, 90%, 90%, .9),
5px -5px hsla(0, 100%, 50%, 1.0);
}
</style>
<div class="text-shadow-red-1">Тень для текста</div>

<style>
.text-shadow {
font-family:'Georgia';
font-size:7rem;
color:#777;
text-shadow: 
0px 0px hsla(0, 5%, 90%, .5),
1px -1px hsla(0, 6%, 80%, .6),
2px -2px hsla(0, 7%, 90%, .7),
3px -3px hsla(0, 8%, 80%, .8),
4px -4px hsla(0, 9%, 90%, .9),
5px -5px hsla(0, 10%, 80%, 1.0);
}
</style>
<div class="text-shadow">Тень для текста</div>