X Course Advisor FREE Course Advisor
Watch Tutorials
How To Create Text Shadows in CSS3

As I mentioned in my tutorial on creating rounded corners, CSS3 is offering up a lot of awesome new features, like multiple columns, gradients, and of course, border effects. In this tutorial, we'll take a look at another new feature, creating drop shadows on text.

This CSS property is supported by the most recent versions of all popular browsers except Internet Explorer...

Step 1

To get started with this effect, find or create a CSS rule that you'd like to apply the text shadow to. Probably the best way to make use of this would be to create a class rule specifically for applying this effect. That's what I'm going to do anyway. I've also applied a bit of formatting to my text using a redefined paragraph element.

Step 2

Next, add the "text-shadow" property to your rule. There are four values that we can apply to the "text-shadow" property. First, add in a color. You can use any color you'd like, although drop shadows are usually fairly dark. If you save your file and check your work in your browser, you'll notice that nothing happens. That's because we have to set some additional properties first.

Step 3

Directly after the color, let's set three numeric values. The first two values can be positive or negative. The last value must be positive.

Now what are these values for? Well, the first value is for the horizontal position of the drop shadow. A positive value will move the shadow to the right, and a negative value moves it to the left.

The second value controls the vertical position of the shadow. A positive value here will move the shadow downwards, while a negative value moves it upwards.

The third value controls the amount of blur on the shadow. Use a lower value for a sharper shadow, or a higher value for a more blurred shadow. As you can see, I prefer using fairly low values.

And that's all there is to creating Text-shadows in CSS3! Continue your CSS learning journey by checking out the tutorial below:

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.


You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.