CSS Text Shadows: How to Add a Text Shadow Using CSS3

John John (304)
2 minutes

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

If you want to straighten things up, check out this guide on how to center align text using CSS.

browser×1
text editor×1

Howchoo is reader-supported. As an Amazon Associate, we may earn a small affiliate commission at no cost to you when you buy through our links.

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.

After your text shadows have been applied, check out this guide to learn how to attach a CSS stylesheet to an HTML document..

Once you learn to think in text objects, you'll never be the same
Dayne Dayne (57)
5 minutes

Any vim user knows that there are underlying concepts worth understanding. While learning the specific keystrokes is useful, I find that knowing the why is crucial to actually adopting new features.