Hello Readers!

We all know about the text-shadow property. It provides a shadow and a blurring effect to the text. The CSS3 text shadow can also be used to create 3D text. Just use multiple text shadows on any HTML element to create a 3D effect.

In this example too, the depth is obtained with multiple text-shadows. Each has been given a zero blur and is also incremented increasingly offset from the main text.

The following code will work in the latest versions of Safari, Chrome, Firefox, and Opera.

HTML :

<div class="wrapper">
 <p>3D TEXT</p>
</div>

CSS :

.wrapper p{
 font:normal 60pt Arial;
 font-size:30px;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}

That was all. Try yourself too. And keep coding!