DEV Community

Cover image for CSS Text Shadow
Suprabha
Suprabha

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

Syntax:

text-shadow: horizontal-offset vertical-offset blur-radius color;
Enter fullscreen mode Exit fullscreen mode

Example:

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

Top comments (4)

Collapse
 
sergix profile image
Peyton McGinnis

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

That's awesome.

Collapse
 
suprabhasupi profile image
Suprabha

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

Collapse
 
muhimen123 profile image
Muhimen

That's a nice GIF.

Collapse
 
suprabhasupi profile image
Suprabha

Thanks ☺️