CSS Text Shadow

Suprabha - Jun 14 '20 - - Dev Community

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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player