CSS3: Text Shadow

27 June 2007

Love ’em or hate ’em, drop shadows are here to stay. And they’re going to get a lot easier to use (and abuse) with CSS3. While technically part of CSS2, as of June 2007 text-shadows are not supported in any browser but Safari, which has supported the property since version 1.1, released in August of 2003. Hopefully we’ll start to see support from future versions of Firefox and Internet Explorer along with support for CSS3.

selector {
	text-shadow: horizontal-offset vertical-offset blur-radius shadow-color;
}

The text-shadow definition is made up of a minimum of two and a maximum of four parts:

horizontal-offset (length, required)
vertical-offset (length, required)
blur-radius (length, optional)
shadow-color (color, optional).

Positive offset values move the shadow right (horizontal) or down (vertical), while negative offset values move the shadow left (horizontal) or up (vertical). If no blur radius is specified, the shadow is not blurred and has the same shape as the text. If no shadow color is specified, the shadow will inherit the color of the text.

Text Shadow Using Hexadecimal Color

#example1 {
	color: #FFF;
	font-size: 2em;
	text-shadow: 0.25em 0.25em 0.25em #000;
}

Text Shadow Using RGB Color

You can define the shadow-color using CSS2’s RGB color notation as well.

#example2 {
	color: rgb(255, 255, 255);
	font-size: 2em;
	text-shadow: 0.25em 0.25em 0.25em rgb(0, 0, 0);
}

Text Shadow Using RGB Color with Alpha Transparency Shadow

Depending on the blur radius of your shadow, it can be anywhere from opaque to mostly transparent. To control the text-shadow’s transparency independent of blur radius, use CSS3’s new RGBA or HSLA color notations, which allow authors to define the alpha value of a color.

#example3 {
	color: rgba(255, 255, 255, 1);
	font-size: 2em;
	text-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.5);
}

Text Shadow Using RGB Color with Alpha Transparency Text

Curious if the text could be made transparent, revealing only the shadow beneath it, I created this next example with fully transparent text and a fully opaque shadow:

#example4 {
	color: rgba(255, 255, 255, 0);
	font-size: 2em;
	text-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 1);
}

In Safari, neither are visible, which leads me to believe that the text transparency is inherited by the shadow. To test that theory, this example has nearly transparent text and a fully opaque shadow. Sure enough, in Safari the white text is nearly invisible, while the black shadow is also nearly transparent:

#example5 {
	color: rgba(255, 255, 255, 0.1);
	font-size: 2em;
	text-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 1);
}

This behavior makes sense, because a transparent object would not cast a shadow.