Using CSS Text-Shadow Property to Create Text Effects

1. 3D Text Effect

This easy CSS text shadow tutorial will show how to create 3D Text with multiple css shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text.

Demo:

CSS Code:

.threeD h2 {

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;

font-size: 50px;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

padding: 10px;

background: #4F7FBF;

}

2. Retro Text Effect

Quick Retro Text Effect in CSS. The text has a big font-size: 50px; and two text shadows without any blur. First text-shadow has lesser offset than the second one and has same color as the background. The second one has a lighter shade of the background colour.

Demo:

CSS Code:

.retro h2 {

color: #d7ceb2;

text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;

font-size: 50px;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

letter-spacing: 10px;

padding: 10px;

background: #393D48;

}

3. Lights Text Effect

The LIGHT text effect is made up of 8 levels of shading. The base text is given a white fill, then each of the 8 text-shadow values are given larger and larger blur amounts while also getting darker. This blends between a vivid white inner glow and the large Pink outer Aria.

Demo:

CSS Code:

.lighteffect h2 {

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;

font-size: 50px;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

padding: 10px;

background: #000;

}

4. Embossed Text Effect

CSS3 embossed text effectusing just text-shadow. Here, I have used two diagonal text shadows, one for the highlight (-1px -1px 0px rgba(255,255,255,0.3)) which is white in color and another one for shadow (1px 1px 0px rgba(0,0,0,0.8)) which is black in color.

There's only one important thing to note, the color of the text should match the color of the background it's placed upon otherwise it will not look good. Transparency is also important but not required if you do not want a watery or glass effect. Take a look at the code to understand more.

Demo:

CSS Code:

.embossed h2 {

text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);

color: #333;

font-size: 50px;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

padding: 10px;

background: #222222;

}

5. Letterpress Text Effect

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

Demo:

CSS Code:

.letterpress h2 {

text-shadow: 0px 1px 1px #4d4d4d;

color: #222;

font-size: 50px;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

padding: 10px;

background: #393D48;

}

Demo

Pages