Css3 can spice up your design in simple and easy way . You can achieve a lot of the effects that needed java scripts and image with css3 easily with few lines . In this post I will show how to create 8 cool effects using text-shadow only .

Let’s Start

The property text-shadow add one or more shadow to a text .It’s included into Css3 text module .

Syntax

• The vertical and horizontal distance can have + or – values . They also can have the value 0.
• Blur radius : Represents the size of the blur effect if the value is zero or it wasn’t represented then the shadow won’t be blurred .
• Color:is the Shadow color . If it is not represented then the shadow color will use the text color instead .

Browser Support :

• Opera 9.5+( Although I’ve noticed that color: transparent was not supported )
• Firefox 3.5+
• Safari 1.0+
• Google Chrome

Demo

You can see a demo of all the effects below on the Demo page … enjoy

1. Glow and extra glow

To achieve the glow effect

Try experimenting …change the radius value to get different effects .

Using the previous cc will add some glow but not as intense as sometimes you might need the solution is to add multiple shadows with different radius values .

We’ve added 2 shadows with 30 and 70 radius values with the same yellow color .

2. Apple style

Pretty simple .. That’s why I love css3

3. Photoshop Emboss

I used multiple shadows here to achieve the effect one to the top/right other to the bottom/left .One down side to this is that if the browser doesn’t support text-shadow (you know what and who I’m talking about ?! ) then you’ll end up with unreadable text .

4. Photoshop Pillow emboss

Again multiple shadows used here .

5. Blurry text

I found this at Simurai Website. Which is a cleaver trick to make the text color transparent and add a blurred shadow to achieve a blurred text effect.Changing the radius value will change the blur value the higher the value the more blurred text you’ll get.

6. Inset text

I found this trick at StylizedWeb .This a very light and elegant effect it adds a nice touch to the text .

The shadow color and the background color are the same .

7. Stroke text

I will admit this is not a very neat effect and needs little improvement to have “realistic” look stroke ..but thought I’ll add it any way .

By adding 2 shadows in the opposite directions you can have what looks like a stroked text.

8.  3D effect

I love this .. I can’t think of much uses for it but I still love it .Found this on Css-trick and thought it’s really cool .By adding multiple shadows with the same color you can achieve what looks like a 3d text .

I added 5 shadows but try experimenting , be creative and have fun .