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

Safari 3 supported one shadow only. Only the first shadow was displayed. Safari 4 supports multiple shadows. Opera 9.5 supported at most six shadows. Later, this limitation was dropped. Please note that Opera painted the shadows in the wrong order. This was fixed in Opera 10.5.

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: 0 6px 4px #33F, -3px -5px 4px #F00, 3px -5px 4px #0F0;

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

© Copyright 2015, Design by congcumienphi.B'log