Text shadow using CSS3

There are many features introduced in new css3, and one of them was text shadow. you can create text border using text-shadow property in css3. check-out the last example.

Syntax for text shadow in css3 goes like this

h1{ text-shadow: 0 0 .2em #999 }

Sample Shadow

There is four parameters in text-shadow syntax

first x, y position of shadow , third blur of shadow and fourth is color.

and you can have multiple text-shadow property to one element. for define text-shadow multiple time just follow the syntax:

text-shadow{ x y [blur] [color], x y [blur] [color], ..}

here are some of amazing examples using text shadow.

Style:

style="text-shadow:0 0 .2em #333;

Demo:

Sample Shadow

Style:

style="text-shadow:1px 1px 0 #00ff00, 2px 2px 0 #00dd00, 3px 3px 0 #00aa00, 4px 4px 0 #009900;"

Demo:

Sample Shadow

Style:

style="text-shadow:2px 2px 0 #aaa, 4px 4px 0 #bbb, 6px 6px 0 #ccc;

Demo:

Sample Shadow

Style:

style="text-shadow:-6px -6px 0 #aaa, -4px -4px 0 #bbb, -6px -6px 0 #ccc;"

Demo:

Sample Shadow

Style:

style="text-shadow:0 0 .2em #ff0000;

Demo:

Sample Shadow

Style:

style="text-shadow:0 0 .2em #ff0000, 3px 3px 1em #eeff00;"

Demo:

Sample Shadow

Style:

style="text-shadow:-2px -2px 0 #d3ffd5, -4px -4px 0 #89ff8d, -6px -6px 0 #4efc54, -8px -8px .2em #00fc08,4px 4px 0 #b0e6fc, 6px 6px 0 #66d3ff, 8px 8px 0 #1ebdfc, -10px -10px .2em #049cd8"

Demo:

Sample Shadow

Style:

style="color: yellow;text-shadow: 0px 1px #ff7200,0px 2px #ff7200,0px 3px #ff7200, 0px 4px #ff7200,0px 5px #ff7200,0px 6px #ff7200,-1px 0 #ff1900, 0 1px #ff1900, 1px 0 #ff1900, 0 -1px #ff1900;"

Demo:

Sample Shadow

you can also use text-shadow property to create amazing text border around the font.

Style:

style="color:#ffe900; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;"

Demo:

This is text with border