Text Shadow in CSS

Text shadow in CSS


There are multiple effects in CSS which can make a website look very cool. One of the property which stands out from the rest is “Text Shadow”. In this article, we will explain how we can acheive text shadow effect to the elements in HTML.


There are two ways to acheive text shadow effect.
1. Single text shadow:


p {

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




Lets learn how to use single text shadow in css to the elements. First value in the property is X-coordinate: 1px

Second value in the property is Y-coordinate: 2px

Third value in the property is Blur radius: 1x

Last value is text color of the shadow: blue.

First and second values are required.These two values specify the text shadow distance. X-coordinate specifies the horizontal distance.Y-coordinate specifies the vertical distance. If both the values are none or 0,shadow is placed directly behind the text, no change in the text. Third value is blur radius, it is optional. If we give higher value, bigger blur and shadow text becomes wider and lighter. If not specifies any value it defaults to 0. Fourth value is color of the shadow.

2. Mutliple text shadow:


p {

text-shadow:1px 2px 1px blue, 2px 2px 3px #fff;


You can also apply multilple text shadows separating by comma. Use this information and experiment your website with text shadow in CSS.