CSS Text Shadows - You Must Know This Technique & Codes

CSS Text Shadows is very useful and important property to make your text attractive. Just a single property but you can use it in different ways, here are some examples for you to make Titles text based by using CSS. As usual I’m uploading Source Files so you can take idea quite easily.

There are two common ways to make shadows (for browsers other than IE), by giving simple parameters and blur and secondly if you want to control the Alpha of the shadow, Internet Explorer having different syntax, here are those:

For example write your text in HTML, I’m going to attach External CSS so made the following DIV in CSS as:

.StunningmeshDirect {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
/* In Internet Explorer */
filter: Shadow(Color=#ffffff, Direction=135, Strength=0);
text-shadow: 2px 2px 0px #fff;
}

Now when you will apply it to your desire text you will get the following result:

If you want to change the alpha property of the shadow then here is the syntax:

.StunningmeshRGBA {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
/* In Internet Explorer */
filter: Shadow(Color=#dddddd, Direction=135, Strength=0);
text-shadow: 2px 2px 0 rgba(255,255,255,0.5)
}

You will get the following result when you apply it to your text:

So by using these techniques I’ve made some shadows for you.

Double Shadow Text Effect:

.StunningmeshStyle1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 2px 2px 0px #000, 3px 3px 0px #ddd;
}

Following result should come.

Neon Shadow Text Effect:

.StunningmeshStyle2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #000;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff9600, 0 0 40px #ff9600, 0 0 50px #ff9600, 0 0 75px #ff9600;
}

Following result should come.

Outline Shadow text Effect:

.StunningmeshStyle3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #000;
text-shadow: 0px 1px 2px #777;
}

Following result should come.

Fire Shadow Text Effect:

.StunningmeshStyle4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFF;
text-shadow: 0 0 10px #fefcc9, 5px -5px 15px #feec85, -10px -10px 20px #ffea34, 10px -20px 25px #ec310c, -10px -30px 30px #ca0000, 0 -40px 35px #850000, 5px -45px 40px #590101;
}

Following result should come.

Ascending Extrude Shadow Text Effect:

.StunningmeshStyle5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 1px 1px 0 #ffdd00, 2px 2px 0 #ffcb05, 3px 3px 0 #fdb913, 4px 4px 0 #faa61a, 5px 5px 0 #f7941d, 6px 6px 0 #f58220, 7px 7px 0 #f37021, 8px 8px 0 #f15a22, 9px 9px 0 #ef4123;
}

Following result should come.

Descending Extrude Shadow Text Effect:

.StunningmeshStyle6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 1px 1px 0 #ef4123, 2px 2px 0 #f15a22, 3px 3px 0 #f37021, 4px 4px 0 #f58220, 5px 5px 0 #f7941d, 6px 6px 0 #faa61a, 7px 7px 0 #fdb913, 8px 8px 0 #ffcb05, 9px 9px 0 #ffdd00;
}

Following result should come.

Simple Extrude Shadow Text Effect:

.StunningmeshStyle7 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #fff, 3px 3px 0 #fff, 4px 4px 0 #fff, 5px 5px 0 #fff;
}

Following result should come.

Anaglyphic CSS Text Shadows Effect:

.StunningmeshStyle8 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 4px 4px 0 rgba(255,255,0,0.5), -4px -4px 0 rgba(100,0,100,0.5);
}

Following result should come.

Simple Shadow Text Effect:

.StunningmeshStyle9 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #000;
text-shadow: 1px 1px 5px #fff;
}

Following result should come.

Perspective Shadow Text Effect:

.StunningmeshStyle10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFFFD7;
text-shadow: 0px 0px 1px #8b0304, 0px 1px 1px #8b0304, 0px 2px 1px #8b0304, 0px 3px 1px #8b0304, 0px 4px 1px #8b0304, 0px 5px 1px #8b0304;
}

Following result should come.

Double Blur CSS Text Shadows Effect:

.StunningmeshStyle11 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFFFD7;
text-shadow: 0px 0px 3px #000, 1px 0px 1px #000, 2px 0px 3px #000, 3px 0px 3px #000, 4px 0px 3px #000, 5px 0px 3px #000, -1px 0px 3px #19e119, -2px 0px 3px #19e119, -3px 0px 3px #19e119, -4px 0px 3px #19e119, -5px 0px 3px #19e119, -6px 0px 3px #19e119;
}

Following result should come.

You must have noticed that almost every shadow is having same syntax, only X-Offset, Y-Offset, Blur have been changed. So hope you will be making different shadows by yourself using this technique.