DEV Community

Cover image for TIL, CSS Text-shadow tricks
Esraa Nasr
Esraa Nasr

Posted on • Updated on

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);
Enter fullscreen mode Exit fullscreen mode

Hard Shadow

Double Shadow

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

Double Shadow

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);
Enter fullscreen mode Exit fullscreen mode

Close and Heavy Shadow

Superhero Shadow

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

Superhero Shadow

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);
Enter fullscreen mode Exit fullscreen mode

Multiple Light Sources Shadow

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/

Top comments (0)