Lesson 17: Creating Drop Shadow

❮ Previous Lesson Next Lesson ❯

We can make our text looks fancier by creating drop shadow using CSS. In order to create drop shadow for a text in CSS, 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. A 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. A 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


<!Doctype html>
<html>
<head>
</head>

<body>
<h1 style="font-size:48px;color:yellow;text-shadow:3px 3px 2px black">
The drop shadow is on right and bottom of text</h1>
<h1 style="font-size:48px;color:yellow;text-shadow:-4px 4px 6px black">
The drop shadow is on left and bottom of text and blurry</h1>
<h1 style="font-size:48px;color:yellow;text-shadow:5px -5px 8px black">
The drop shadow is on right and top of text and blurrier</h1>
<h1 style="font-size:48px;color:yellow;text-shadow:-5px -5px 10px black">
The drop shadow is on left and top of text and blurriest</h1>
</body>
</html>

The Output

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

❮ Previous Lesson Next Lesson ❯