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, Konqueror and iCab. Future versions of Google Chrome should also support text-shadow because Chrome is based on WebKit, the rendering engine behind Safari. Internet Explorer 8 does not support such text shadows (except for some DirectX image transform filters).

Animated multiple Shadows (requires JavaScript)

Start/stop animations. Safari supports one shadow only. Only the first shadow is displayed.

element.style.textShadow = "…";

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

element.style.textShadow = "…";

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Multiple Shadows (max. 6)

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

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Classical Shadows

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

text-shadow: 0 0 8px #000;

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Glowing Borders

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

text-shadow: 0 0 5px #FF0;

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

text-shadow: 0 0 3px #F90;

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Unusual Effects

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

text-shadow: 0 0 11px #FF6;

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

text-shadow: 0 0 8px #000;

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

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