Text-shadow CSS

CSS property text-shadow defines one or more shadow effects to be applied to the text content of the current element. This adds various effects to the text.
I made some trials with interesting results. You can download code with all samples and keep trying.
Text-shadow property is animatable in css (see no. 6,13,15).

1 ginsio

example .s1 { font-family: Georgia, serif; font-style: italic; letter-spacing: 3px; background: #c9c5ba; color: #f9f9f7;
text-shadow: -1px 1px #dcdbd8, 1px -1px #ddd, 2px -2px #bbb, 3px -3px #999, 4px -4px #777, 5px -5px #555, 6px -6px #666; }

Syntax

text shadow: horizontal-offset vertical-offset blur color [, horizontal-offset vertical-offset blur color]*;

horizontal-offset
horizontal coordinate of shadow, allows 0, positive (right) and negative (left) values
vertical-offset
vertical coordinate of shadow, allows 0, positive (below) and negative (above) values
blur
blur radius is optional, it’s a length value that represents the size of the blur effect

In year 2015 text-shadow property is supported in all major browsers with the exception of IE 9 and earlier.

Examples

Feel free to paste and copy or download file with all samples and keep trying.

download code

2 ginsio

.s2 { font-family: Georgia, serif; letter-spacing: 2px; background: #383836; color: #555;
text-shadow: 1px 1px 7px #111, 1px 1px #efefef, -1px -1px #000, -1px -1px #222; }

ginsio

.s3 { font-family: Georgia, serif; font-weight: bold; font-style: italic; letter-spacing: 2px; background: #d7d2c6; color: #0f1319;
text-shadow: -1px 1px #ccc, 1px -1px #ccc, -1px -1px #ccc, -1px 1px 2px #999, 1px -1px 2px #aaa, 1px 1px 2px #bbb, -1px -1px 2px #ccc, 2px 2px 3px #222, 4px 5px 5px #fff; }
.s3 span { color: #e3312d; }

4 ginsio

.s4 { font-family: Georgia, serif; text-transform: uppercase; background: #383836; color: #555;
text-shadow: 1px 1px #7f7f7f, -1px -1px #111, -2px -2px 3px #333, 2px 2px 3px #383836, 1px 0 20px #484846; }

5 ginsio

.s5 { font-family: Georgia, serif; font-weight: bold; font-style: italic; letter-spacing: 5px; background: #dbd7cc; color: #e55218;
text-shadow: -1px 1px #614034, -1px 1px 2px #5c5954, -12px 6px #f9f7f0; }

6 ginsio

animatable 9s

.s6 { font-family: Candara, sans-serif; font-weight: bold; font-style: italic; letter-spacing: 2px; background: #c3bcb5; color: #f5f6f3;
text-shadow: 0 2px 7px #111, 0 1px #eee, 0 3px #ddd, 0 5px #cdcdcd, 0 6px #bcbcbc, 0 7px 2px #282828, 0 12px 5px #151515; }

7 ginsio

.s7 { font-family: Georgia, serif; font-weight: 100; font-style: italic; letter-spacing: 2px; background: #b9cb8e; color: #afc182;
text-shadow: -1px -1px rgba(90,92,87,0.55), 1px 1px rgba(229,226,210,0.55); }

8 ginsio

.s8 { font-family: Constantia, Georgia, serif; letter-spacing: 4px; background: #111; color: #171717;
text-shadow: -1px -1px 10px #111, 1px 1px #ff5a00, -1px -1px #ff5a00, 1px -1px #ff5a00,-1px 1px #ff5a00, -1px -1px #ff5a00, 1px 1px #ff5a00, 1px 1px 1px #ff5a00, -1px -1px 1px #ff5a00, 1px -1px 1px #ff5a00,-1px 1px 1px #ff5a00, -1px -1px 1px #ff5a00, 1px 1px 1px #ff5a00, 1px 1px #000, 0 0 20px #000; }

9 ginsio

.s9 { font-family: Constantia, Georgia, serif; font-weight: 100; letter-spacing: 1px; background: #373736; color: #f1213e;
text-shadow: -1px -1px 1px #484846, -3px -3px 5px #383836, 1px 1px 2px #000, 3px 3px 7px #000, 2px 1px 1px #000, 3px -1px 1px #000; }

10 ginsio

.s10 { font-family: Candara, Calibri,sans-serif; font-weight: bold; font-style: italic; letter-spacing: 15px; word-spacing: -0.2em; background: #c1d09e; color: #ea622c;
text-shadow: 3px -3px 2px #c1d09e, -3px 3px 2px #c1d09e, 8px -8px #e7edcd, -8px 8px #e7edcd; }

11 ginsio

.s11 { font-family: Georgia, serif; font-weight: 100; font-style: italic; letter-spacing: 2px; background: #9db8d3; color: #e5e3dc;
text-shadow: -1px -1px #f3f2ee, 1px 1px #b0aea8, 13px 10px 10px rgba(0,0,0,.5) }

12 ginsio

.s12 { font-family: Constantia, Times, serif; font-weight: bold; text-transform: uppercase; background: #333; color: #5e5e5c;
text-shadow: 1px 1px 1px #000, 2px 2px 2px #222, 2px 2px 10px #000, -1px -1px #f1f1f1, -2px -2px #999, -3px -3px #666, -4px -4px #484846,-5px -5px 10px #222; }

13 ginsio

animatable 9s

.s13 { font-family: Cambria, Georgia, serif; font-weight: bold; letter-spacing: 0.1em; font-style: italic; word-spacing: -0.1em; background: #212121; color: #282828;
text-shadow: 1px 1px rgba(255,0,0,.4), 1px -1px #444, -1px -1px #444, -1px 1px #333, 10px 9px 15px red; }

14 ginsio

.s14 { font-family: Georgia, serif; font-weight: 900; background: #282828; color: rgba(255,255,0,.5);
text-shadow: 0.07em -0.07em rgba(255,255,255,.55), -0.07em 0.07em rgba(255,0,0,.6); }

15 ginsio

animatable 9s

.s15 { font-family: Verdana, Georgia, serif; font-weight: 900; background: #111; color: rgba(255,0,0,.47);
text-shadow: 1px 1px rgba(0,0,0,.5), 0.1em -0.1em 7px rgba(0,0,0,.8), 0.2em -0.15em 7px rgba(255,0,0,.5), -0.1em 0.1em 7px rgba(0,0,0,.8) }

last revised: april 8 2015