Stylish Text Shadow Examples Using CSS

How stylish text shadow can you create using CSS? Can you do any better than simple shadow? Can you create some Photoshop like shadow effects using only CSS?

Since long web developers have been using underlying shadows to make text and DIV element look as though they are embossed or lifted from the surface. In olden times, images and transparent images were used to create the shadow effect. Developers would layer shadow image under the text or DIV to achieve the desired effect of a shadow.

But with the arrival of CSS 3 –it is now very simple to add shadow –and that too in a fully customizable way!

Let’s see how to create some stylish text shadows with CSS text-shadow property. Let’s begin with basic usage:

<div style="text-shadow: 2px 2px 2px #000000; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>

<div style="text-shadow: 20px -12px 2px #6374AB; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>

As you can see the text-shadow property takes four parameters:

1. The X-coordinate of the text-shadow (relative to the text)
2. The Y-coordinate of the text-shadow (relative to the text)
3. The blur radius of the text-shadow. It is the amount of space the shadow text is ‘stretched’, causing a blur effect.
4. The color of the text-shadow

Now let’s see some more fancy examples of CSS text shadow:

<div style="color: #000; background: #666; text-shadow: 0px 1px 1px #fff; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>

<div style="color: #666; background: #000; text-shadow: 0px 1px 1px #fff; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>

Another amazing feature of text-shadow property is that you can use multiple shadows on the same text and create some even more impressive effects!

On Fire CSS Text Shadow

<div style="color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>

Solid Rock CSS Text Shadow

<div style="background:#3B5998; color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; line-height: 35px; padding:20px; font-size: 30px">TechWelkin is a resource of technology information</div>

Neon Lights CSS Text Shadow

<div style="background:#000; color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95; letter-spacing: 5px; line-height: 55px; padding:20px; font-size: 50px">TechWelkin is a resource of technology information</div>

How did you like these great effects? If you have any questions about text-shadow property of CSS, please feel free to comment and ask. Also, if you know about another breath-taking text shadow effect, please let me know.