CSS Text-Shadow in Safari, Opera, Firefox and more

The CSS 2 property text-shadow is supported in Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Google Chrome since version 2, Konqueror and iCab. In fact, text-shadow is supported by all browsers that are based on WebKit, the rendering engine behind Safari and Chrome. Internet Explorer 8 does not support such text shadows (except for some DirectX image transform filters).

Animated multiple Shadows (requires JavaScript)

Start/stop animations.

element.style.textShadow = "…";

Text shadows were defined in 1997 and became applicable in 2009

element.style.textShadow = "…";

Text shadows were defined in 1997 and became applicable in 2009

Multiple Shadows (max. 6)

Opera supports at most six shadows. Safari 3 supports one shadow only. Only the first shadow is displayed. Safari 4 supports multiple shadows.

text-shadow: -1px -1px #666, 1px 1px #FFF;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 1px 0 #F33, -1px 0 #33F;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 2px 0 4px #600, -2px 0 4px #006;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 3px -5px 4px #0F0, -3px -5px 4px #F00, 0 6px 4px #33F;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;

Text shadows were defined in 1997 and became applicable in 2009

Classical Shadows

text-shadow: 1px 1px 2px #999;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 2px 2px 3px #999;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 0 0 8px #000;

Text shadows were defined in 1997 and became applicable in 2009

Glowing Borders

text-shadow: 0 0 11px #0F0;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 0 0 5px #FF0;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 0 0 3px #F90;

Text shadows were defined in 1997 and became applicable in 2009

Unusual Effects

text-shadow: 0 7px 11px #390;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 0px -15px 0 #F00;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 0 0 11px #FF6;

Text shadows were defined in 1997 and became applicable in 2009

text-shadow: 0 0 8px #000;

Text shadows were defined in 1997 and became applicable in 2009

© Thiemo Mättig, created in September 2007
More CSS experiments »