Text and Box Shadows

Shadows are useful for adding emphasis on page elements. This tutorial will cover the basics of adding shadows to your boxes and text like this:

This sample text has a pink shadow.

Box shadows

1

2

3

4

5

We have to keep in mind that shadow codes have four properties: horizontal offset, vertical offset, shadow width, and shadow color. Let’s take a look at our code and break down its elements.

.shadowbox {
box-shadow: 5px 5px 5px #A5A5A5;
-moz-box-shadow: 5px 5px 5px #A5A5A5;
}

A breakdown of the code:

.shadowbox {
box-shadow: (horizontal offset) (vertical offset) (shadow width) (shadow color);
-moz-box-shadow: (horizontal offset) (vertical offset) (shadow width) (shadow color);
}

The horizontal and vertical offset values can be negative. If the horizontal offset is negative, the shadow moves to the left. On the other hand, a negative vertical offset will make the shadow appear on top.

Box #1: Blue shadow placed at the bottom right.

.shadowbox {
box-shadow: 3px 3px 3px #0DDBEE;
-moz-box-shadow: 3px 3px 3px #0DDBEE;
}

Box #2: Yellow shadow placed at the top left.

.shadowbox {
box-shadow: -3px -3px 3px #FFE615;
-moz-box-shadow: -3px -3px 3px #FFE615;
}

Box #3: Pink shadow placed at the background. This can be achieved by using a zero value for the horizontal and vertical offset.

.shadowbox {
box-shadow: 0 0 7px #EB4D87;
-moz-box-shadow: 0 0 7px #EB4D87;
}

Box #4: Yellow shadow placed at the bottom left.

.shadowbox {
box-shadow: -3px 3px 3px #FFE615;
-moz-box-shadow: -3px 3px 3px #FFE615;
}

Box #5: Blue shadow placed at the top right.

.shadowbox {
box-shadow: 3px -3px 3px #0DDBEE;
-moz-box-shadow: 3px -3px 3px #0DDBEE;
}

Text shadows

1

2

3

4

5

The elements of the text shadow code is the same for those of box shadows. Let’s take a look at its code:

.textshadow {
text-shadow: 3px 3px 3px #EB4D87;
}

A breakdown of the code:

.textshadow {
text-shadow: (horizontal offset) (vertical offset) (shadow width) (shadow color);
}

Text #1: Blue shadow placed at the bottom right.

.textshadow {
Text-shadow: 1px 1px 1px #0DDBEE;
}

Text #2: Yellow shadow placed at the top left.

.textshadow {
Text-shadow: -1px -1px 1px #FFE615;
}

Text #3: Pink shadow placed at the background. This can be achieved by using a zero value for the horizontal and vertical offset.

.textshadow {
Text-shadow: 0 0 3px #EB4D87;
}

Text #4: Yellow shadow placed at the bottom left.

.textshadow {
Text-shadow: -1px 1px 1px #FFE615;
}

Text #5: Blue shadow placed at the top right.

.textshadow {
Text-shadow: 1px -1px 1px #0DDBEE;
}

You can use this effect to make elements of your page stand out. This is very useful for headings or titles. Send me an e-mail if you have questions :-)