in CSS

Text Shadow in CSS3

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

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.

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>

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email