Typography is everyone’s favorite toy in web design. The CSS3 text-shadow property is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. But this isn’t all the text-shadow property is capable of. With a little ingenuity and creativity text-shadow can create some remarkable effects.
Today we’re going to run through several CSS3 text-shadow examples that you can copy and paste for your own work.
text-shadow: horizontal-offset vertical-offset blur color;
The syntax includes four variables to work with, the first two set your shadow’s position (horizontal and vertical), the third sets the amount of blur and the fourth the color of the shadow.
The best thing is – you don’t have to settle with one shadow, you can build up multiple text-shadow values to create some really interesting effects!
Retro Text Effect
There is a clear separation between the text and its shadow. This effect can be achieved using two text-shadow values — one nearer to the letterform, and matching the background color, in order to give the impression that the second shadow is offset to the bottom right.
text-shadow: 4px 4px 0px background-color, 10px 10px 0px shadow-color;
3D Text Effect
Use multiple text-shadows to create impressive 3D text effect – by Marko Dotto.
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
Hard Shadow Text Effect
Hard text shadows are very popular due to their “retro” nature and they are achieved without bluring shadow.
text-shadow:-4px -2px 0 #fff;
Anaglyphic Text Effect
Anaglyphic text effect provide stereoscopic 3D effect. It’s achieved by using RGBa on the text and the shadow, so the underlying text is visible through the shadow.
text-shadow:8px 8px 0 rgba(236,144,79, 0.6);
Letterpress Text Effect
On dark backgrounds offset the shadow (on the Y-axis) underneath the text with a light colour, whereas on light backgrounds offset (again on the Y-axis) to the top of the text with a darker shadow color.
text-shadow: 0px 2px 3px #666;
Your Turn To Talk
Which one is your favorite text effect?