Text Shadows with CSS
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.
text-shadow: 1px 1px 2px #000;
In the text-shadow property, there are four values that can be set in the following order:
- 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.
- 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.
- The blur amount: this is how blurry do you want the shadow.
- 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.
text-shadow: 0 1px 0 #4F2F06,
0 2px 0 #4F2F06,
0 3px 0 #4F2F06,
0 4px 0 #4F2F06,
0 5px 0 #4F2F06,
0 6px 0 #4F2F06,
0 7px 7px #4F2F06;
Have you found any other creative uses for text-shadow? If so, please share them in the comments below!
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
Tools of the Trade