DEV Community

Cover image for CSS Text Shadow

Posted on • Updated on


CSS Text Shadow

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


text-shadow: 1px 1px 2px white;
Enter fullscreen mode Exit fullscreen mode

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 πŸ‘©πŸ»β€πŸ’» 🌟 Instagram

Top comments (4)

sergix profile image
Peyton McGinnis

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

That's awesome.

suprabhasupi profile image

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

muhimen123 profile image

That's a nice GIF.

suprabhasupi profile image

Thanks ☺️

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.