CSS

Text Shadow in CSS3

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

Back to top

Gain access to all tutorials

  • Premium tutorials covering WordPress, Laravel and VueJS
  • Download premium content
  • Download premium WordPress plugins
  • Only $5 a month

Join Paulund