CSS3: Text-Shadow Property.. 11.06.10

Category: Coding

A very quick blog.......

CSS3 finally has the "text-shadow" property that was originally proposed in CSS2, This eliminates the need for certain Photoshop tools to create text shadow effects.. well, kind of.

At the moment its quite trendy for portfolios to use this property to create slightly raised text, indented text using negative values and link animations.

The property looks like this: 

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

and translates to this..

text-shadow: (2px offset right) (2px offset below) (2px shadow blur) (color #000);

(text shadow normal usage)

text-shadow: 1px 1px #000;

or.. did I mention you can stack them? well you can.

(Multiple stacked text shadows using rgb(a) colour, alpha included.)

text-shadow: 1px 1px rgba(255,255,255,.7), 2px 2px rgba(255,255,255,.7),  3px 3px rgba(255,255,255,.7);

These shadow effects can look really cool mixed with the new CSS3 transition effects, for instance you could create an animated 'raised’ link hover state such as David Desandro has done below. 

link hover example

I would recommend checking out some of his experiments they are extremely creative, he has inspired many people on the internet to try and create pure css3 icons that have resolution independence, kind of like vector based web-icon-experiments. 


CSS Text Level 3 - W3C Working Draft 6 March 2007

CSS Transitions Module Level 3 - W3C Working Draft 01 December 2009

David Desandro





Posted by: Sam S