CSS Tutorial Lesson 17: Creating Drop Shadow

We can make our text looks fancier by creating drop shadow. To create drop shadow for a text, we use the text-shadow property. The syntax to create a drop shadow is

text-shadow: x, y, z, color

x , y, z are values in pixels where
x represents the distance of the shadow to the left or right of the text. Positive value indicates the shadow is to the right and negative value indicates the shadow is on the left.
y represents the distance of the shadow to the top or bottom of the shadow.  Positive value indicates the shadow  at bottom of the text and negative value indicates the shadow is on top of the text.
z indicates how much blur it is added to the shadow. It is an optional value.

Example 17.1

The drop shadow is on right and bottom of text

The drop shadow is on left and bottom of text and blurry

The drop shadow is on right and top of text and blurrier

The drop shadow is on left and top of text and blurriest

The Ouput

The drop shadow is on right and bottom of text

The drop shadow is on left and bottom of text and blurry

The drop shadow is on right and top of text and blurrier

The drop shadow is on left and top of text and blurriest