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.

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..

Take a trip down memory lane or discover the origins of the most popular websites around!
Michael Michael (175)

Ever wondered what some of the homepages you visit daily looked like when they first launched?