Here’s some text shadow effects like outline, fake bold, and blurry text.
The basic text-shadow syntax
The length and the color values can have following two orders:
offset-x | offset-y | blur-radius | colorcolor | offset-x | offset-y | blur-radius
text-shadow: 6px 6px 6px #33ffcc;You can put the color first and skip the blur-radius:
text-shadow: #33ffcc 6px 6px;You can also skip the color and it uses the text color:
text-shadow: 6px 6px;Outlined text
You can have multiple shadows, this way you can make outlines and other more crazy things:
text-shadow:
4px 4px 0 #33ffcc,
-4px -4px 0 #33ffcc,
4px -4px 0 #33ffcc,
-4px 4px 0 #33ffcc;Foo
You can see it better if they all have a different color (kind of cool effect):
text-shadow:
4px 4px 0 red,
-4px -4px 0 blue,
4px -4px 0 gold,
-4px 4px 0 green;Foo
Fake bold
This way you can also do fake bold text, it won’t look as good as real bold, but it’s passable in smaller sizes. This might come handy when you’re forced to use a font that doesn’t have a bold cut, like Monaco.
text-shadow:
2px 2px 0,
-2px -2px 0,
2px -2px 0,
-2px 4px 0;Out of focus text
Using the same pattern than above, but adding some blur, you can get a nice out-of-focus effect:
text-shadow:
2px 2px 3px,
-2px -2px 3px,
2px -2px 3px,
-2px 4px 3px;Foo
Embossed text
The embossed effect only works on a background color.
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);Foo
Conclusions
You could go berserk with the amount of shadows. These are just the basics.