Adding text-shadow To Your Type Using CSS3
February 15th, 2010
Adding a shadow to your text with CSS3 is actually quite easy. In this tutorial, I’ll show you how to use the text-shadow property to do just that.
Browser Support
Currently, the text-shadow property works in Safari, Firefox, Opera, and Chrome.
Adding shadow to your type
A shadow is added to your type using the text-shadow property. In the example below, you’ll notice 3 pixel values. The first controls horizontal offset, the second controls vertical offset, and the third controls blur. The fourth value is the shadow color, which is set using a hex number.
Here’s what the CSS looks like
h1 {
text-shadow: 2px 2px 2px #000;
}
Here’s what it looks like
This is a text shadow
Like I mentioned in my intro, this one is pretty easy to implement into your designs,. I’d suggest playing around with the horizontal, vertical, and blur values to see what you can come up with.
Print This Post
Follow me