Text Shadows with CSS

11.09
2013

By Aaron In Tutorials

Do you prefer YouTube? Watch this video here.

Text shadows are a great way to add dimension to any text related HTML element. It provides a simple way to recreate the drop shadows that designers relied on Photoshop, for years. It can be used for subtle improvements or you can also get creative with the uses.

Simple Text Shadow

In the text-shadow property, there are four values that can be set in the following order:

  1. The x-offset: this is how far to the right or left you want the shadow. Positive numbers move the shadow to the right, Negative numbers move the shadow to the left.
  2. The y-offset: this is how far up or down you want the shadow. Positive numbers move the shadow down, Negative numbers move the shadow up.
  3. The blur amount: this is how blurry do you want the shadow.
  4. The color: this is the hexidecimal or RGBA color code of the shadow.

This property doesn’t stop with just simple shadows. If you’re creative with it, you can come of with some other amazing looking text effects. You can use multiple shadows together to get different looks.

This looks 3D

Have you found any other creative uses for text-shadow? If so, please share them in the comments below!

VIP List

Join The VIP Mailing List

Even if you don't visit this site on a regular basis, you can
get the latest posts delivered to your inbox.

I hate SPAM. I value your privacy and trust.


Leave Us Your Thoughts