Cover image for CSS Text Shadow

CSS Text Shadow

suprabhasupi profile image Suprabha Updated on ・1 min read

With CSS3 you can create two types of shadows: text-shadow (adds shadow to text) and box-shadow (adds shadow to other elements).

In this section we will be checking how can we create text shadow.

CSS3 Text Shadow

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations


text-shadow: horizontal-offset vertical-offset blur-radius color;


text-shadow: 1px 1px 2px white;

Below I am going to add few examples to check how text-shadow works where we include Hard Shadow, Double shadow , etc.

You can find the code in codepen

Thanks for reading this article β™₯️

If you have any question, please feel free to ping me onΒ @suprabhasupi πŸ˜‹

🌟 Twitter πŸ‘©πŸ»β€πŸ’» Suprabha.me 🌟 Instagram

Posted on by:

suprabhasupi profile



Frontend Developer ❀️ Gamer πŸ‘Ύ


markdown guide

I actually didn't think you could put GIFs as cover images.

That's awesome.


yeah we can put GIF as a cover image.. πŸ™‚