TIL, CSS Text-shadow tricks

Hey guys,

This article includes examples of text-shadow to add visual interest to your website's typography. I will try to update it every week with new examples.

Hard Shadow
Double Shadow
Close and Heavy
Glowing
Superhero
Multiple Light Sources

Hard Shadow

text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);

Double Shadow

text-shadow: 4px 3px 0px #fff, 
             9px 8px 0px rgba(232, 28, 28, 0.43);

Close and Heavy Shadow

text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 
             0px 8px 13px rgba(0, 0, 0, 0.1),
             0px 18px 23px rgba(0, 0, 0, 0.1);

Superhero Shadow

text-shadow: -10px 10px 0px #C29DFA, 
             -20px 20px 0px #934FFA,
             -30px 30px 0px #6600FF;

Multiple Light Sources Shadow

text-shadow: 0px 15px 5px rgba(0, 0, 0, 0.1),
             10px 20px 5px rgba(0, 0, 0, 0.05),
             -10px 20px 5px rgba(0, 0, 0, 0.05);

That's all the things I'm learning today what about you?

let's share our knowledge and tell me what you learned today.

Here are my social links if you would like to follow.

Github: https://github.com/EsraaNasr92/
Twitter / X: https://twitter.com/Esraa_nasr92
Instgram: https://www.instagram.com/_esraaanasr/