Add a text shadow using CSS3

Tyler Tyler (275)

Text shadows are a beautiful and subtle effect for your web site. CSS3 text shadows are currently support on all versions of Chrome, Safari, Firefox 3.5+, and IE 10+.

Here's everything you'll need to complete this guide:

text editor×1

To apply text-shadow to an HTML element (ie h1) use the standard css syntax: h1 { text-shadow: 0px 1px 2px #eee; } The css property is called text-shadow and from left to right the values are as follows: - 0px represents the shadow offset to the right. - 1px represents the shadow offset below. - 2px represents the spread or blur distance. - Finally, the #eee is the color of the shadow.

The offsets can all be negative values as well. So using "-1px" for the first value would move the shadow 1px to the left.