DEV Community

Cover image for CSS Text Shadow
Suprabha
Suprabha

Posted on β€’ Edited on

23 11

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 ☺️

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❀️