How to use Text Shadow /w CSS3

CSS3 presents many new possibilities when it comes to text effects on websites. The text-shadow property is one of these awesome abilities!

Understanding the Syntax

Below is an image that should nicely explain the syntax on the text-shadow property.

What Browsers?

At the time of writing, I have tested Google Chrome, Apple Safari, Mozilla Firefox and Internet Explorer browsers to see if they can render the text-shadow property. Below you can see the results …

Therefore, any viewers using Internet Explorer WILL NOT be able to see the text-shadow examples working. Please download and use either Google Chrome, Apple Safari or Mozilla Firefox in order to fully appreciate this tutorial.

What can we do?

There are a number of different effects we can achieve through the text-shadow property:

1. Glow
2. Indent
3. Emboss
4. Blur
5. 3D

Glow

Here we are going to create a green glow effect with white text.

1
2
3
4
5

.green-glow {
	text-shadow: 0 0 20px green;
}

Indent

Here we are going to create an indent effect.

1
2
3
4
5
6
7

.indent-effect {
	text-shadow: 0 1px 1px #FFF;
	color: #717171;
}

Emboss

Here we are going to create an emboss effect.

1
2
3
4
5
6
7

.emboss-effect {
	text-shadow: -1px -1px white, 1px 1px #333;
	color: #CCC;
}

Blur

Here we are going to create a blur effect.

1
2
3
4
5
6
7

.blur-effect {
	color: transparent;
	text-shadow: #FFF 0 0 10px;
}

3D

Here we are going to create a 3D effect.

1
2
3
4
5
6
7
8
9

.ddd-effect {
	color: #8a8a8a;
	text-shadow: 1px 1px #5f5f5f, 2px 2px #5f5f5f, 3px 3px #5f5f5f, 4px 4px #5f5f5f, 5px 5px #5f5f5f;
	font-weight: bold;
}

That’s It!

Well that’s it for this tutorial. Hopefully now you should be able to use the text-shadow by yourself.

As usual, if you have any questions or queries regarding the tutorial or text-shadow property, just leave a comment! I’ll try to get back to you ASAP.