Text Shadow

Published at - 0 Comments

Text-shadow is used to either get a shadow or an effect on a text element. You can pass multiple shadows to one text element. When you use text-shadow for a effect you may get totaly different resaults depending on the type of font you use. Lets take a look at the markup.

Regular black shadow
text-shadow:
1px /* X-coordinate of the text shadow - px/em */
1px /* Y-coordinate of the text shadow - px/em */
4px  /* The blur radius of the text shadow - px/em */
black; /* Color of the text shadow - #/rgb/rgba/color name */

Lets create some different effects.

White highlight

This efffect is a little bit trendy at the moment. I use it in the menu on this site.

text-shadow: 0 1px 0 white;
Multiple shadows – 3D effect
text-shadow: 0 -1px 0 white, 0 1px 0 black;
Fiery Effect
text-shadow: 0 0 2px #aaa, 2px 2px 4px #ff3, 4px 12px 6px #fd3, 8px 15px 11px #f80, 8px 18px 18px #f20;

It is pretty simple. If you create something beautiful please leave a link in the comments.

Compatibility
  • IE ≤ 8 no
  • Firefox 3.1+
  • Safari 3.0+
  • Chrome 2+
  • Opera 9.62+
  • Konqueror 3.5.7+