CSS3 shadows

Introduction

Did you know that CSS3 supports text shadows? A text shadow is what it sounds like, a shadow to a text, from all possible angles.

Values

offset-x – Horizontal position. A positive value place the shadow to the right.

offset-y – Vertical position. A positive value place the shadow to the bottom.

blur-radius – A higher value gives more blur.

color – The color of the shadow.

Examples

Single text shadow

This gives a shadow to the bottom right with a little blur with red color.

text-shadow: 5px 5px 3px #ba0000;

Multiple text shadows

The example gives us the ”CSS3 shadows” text (at the beginning of this page).

As you can see it almost looks like I created a white border around the text. Lower the blur value and put shadows in all directions to give that effect.

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 5px 5px 5px #000;

Works with (browsers)

• Full support – Chrome, Firefox, Safari
• Partial support – Opera
• No support – Internet Explorer