Adding shadows around text with CSS3

So you wanna add some shadows around your text? Here you go.
p { text-shadow: 1px 1px 1px #444; }

Text with a shadow

Let’s break it down:

The first number determines how many pixels the shadow falls to the right (or left if it’s a negative number) of your text. The second number determines how many pixels up or down your shadow falls in relation to your text. The third number is is the blur effect which states how many pixels the shadow spreads. The third number is optional. If left out, the shadow is treated as if you’d entered a zero. Finally, the last number is the hex number for the color of your shadow.

You can also use RGBA values for your shadow color like so…
p { text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.5); }
That code will create a white shadow with 50% transparency. Isn’t CSS fun?
Don’t be surprised when this doesn’t work in IE.

Jeff Roberts Web Design
7700 Howe Drive
Prairie Village, KS 66208

Copyright 2018. All Rights Reserved.