CSS: Make a shadow with box-shadow and text-shadow!

With the CSS property „box-shadow“ you can easily add shadows to an HTML element: All you need, besides the color, is the size and both the vertical and horizontal position. So you can position the shadow only downwards, without a shift to the right or left!

The code for a gray shadow with only a slight offset looks like this:

box-shadow:1px 1px 5px #333333;

The first value stands for a horizontal offset to the right or left, the second value for the vertical offset to the bottom. 5px is the size of the shadow should be; the last value defines the shadow’s color.

To display the shadow in older versions of Firefox, Safari or Chrome, you should use their special browser prefixes:

.shadow {
-moz-box-shadow:1px 1px 5px #333333;
-webkit-box-shadow:1px 1px 5px #333333;
box-shadow:1px 1px 5px #333333;
}

If you now add the class „shadow“ to an element, the shadow is displayed: Here in the example left without shadow, in the example right with shadow.

Code for the shadow in this example:

<div style="width:200px;height:100px;
background-color:#FFFFFF;border:1px solid #000;
box-shadow:1px 1px 5px #333333;
-webkit-box-shadow:1px 1px 5px #333333;
-moz-box-shadow:1px 1px 5px #333333;">>

 
box-shadow or text-shadow?

The property „text-shadow“ already exists since CSS2, so it is much older is „box-shadow“. Nevertheless text-shadow is not limited to texts and box-shadow can also be used for a shadow in a text.

The syntax looks the same:

text-shadow:1px 1px 5px #333333;

The first value again stands for a horizontal offset to the right or left, the second value for the vertical offset. The value 5px indicates the size of the shadow. The last one is again the shadow color.

Text-shadow does not only allow one shadow: A total of six different shadows can be attached to an object! This is handy: By using several combined text-shadow statements you can create an outline around text: This makes the text easier to read even on different backgrounds:

 
Text with an CSS outline:

<style stype="text/css">
.outline {
	color:#FFF;
	text-shadow: 1px  1px 1px #000,
                 1px -1px 1px #000,
                -1px  1px 1px #000,
                -1px -1px 1px #000;
}
</style>


<h1 class="outline">Text with outline/h1>

 
CSS Outline with text-shadow: This is what it looks like!

Outline-Text mit CSS