Text Shadow in CSS3

in CSS

What?

Apply a shadow to any text in any direction using any color in pure CSS.

Why?

Before CSS3 the only way to add a shadow to text on a web page is to create an image using software such as Photoshop or Gimp and apply a shadow to the text.

The problem with this is that you will need to load a image to your web page increasing load times and and removing this text from being indexed by search engines, so using CSS will correct these problems and still give the same graphic look as it would using graphic software.

How?

The syntax for text shadow is simply text-shadow followed by 4 parameters.

  1. The X-coordinate
  2. The Y-coordinate
  3. The blur radius
  4. The color of the shadow

.text-shadow {
     text-shadow: 2px 2px 4px #666;
}
<p style=padding:10px; background:#FFF; color:#000; text-shadow: 2px 2px 4px #666;>Testing Text shadows</p>

Testing Text Shadow

Subscribe To Newsletter

Get weekly updates to your email