3D Text Using CSS

Here I am going to explain creating 3D text using pure CSS. This tutorial will show you step by step how to create 3D font with multiple css shadows by stacking multiple CSS3 text shadow properties.

How CSS Shadow Text works

To create this 3D CSS shadow text effect we are going to use the CSS 3 text-shadow property, this is how text-shadow works:

.shadow{
    text-shadow: [x offet] [y offset] [Blue size] [colour];
}

Creating the 3D CSS text using shadow

Here you can see the transformation of normal text into 3D text. Pick coluors darker than original text colour for shadow, so for this example I will be using white text, with a 2 level deep grey shadow, followed by a 4 level deep near black shadow to create that 3D text illusion.

Ex:

.shadow{
    text-shadow : 1px 1px #CCCCCC,
                  2px 2px #CCCCCC,
                  3px 3px #444444,
                  4px 4px #444444,
                  5px 5px #444444,
                  6px 6px #444444;
}

you can stop there if you like, you have your basic 3D CSS text illusion, using multiple shadows. Now, let's go two steps further and make the text size increase on hover by using the CSS text transform property to have the 3D text pop out / zoom in & out on hover! Then have it fade in and out smoothly with a CSS transition, pure CSS3, no JavaScript required!

Increasing text size on hover with CSS text transform

.shadow:hover{
    /* CSS3 Transform Effect */
    -webkit-transform: scale(1.1);  /* safari & chrome */
    -moz-transform: scale(1.1);   /* Firefox */
    -o-transform: scale(1.1);     /* Opera  */  
} 

You can make the text bigger by changing the (1.1) value, (2.0) would be double the original size. This instant CSS text transform on hover could use some improvement however, so we are going to make it fade in and fade out over a few milliseconds.

Making the CSS transition on hover smooth

.shadow{
     /* CSS3 Transition Effect */
     -webkit-transition: all 0.12s ease-out; /* Safari & Chrome */
     -moz-transition: all 0.12s ease-out; /* Firefox */
     -o-transition: all 0.12s ease-out;  /* Opera */
}

Now the text size grows larger on hover and goes back to it’s normal state in a smooth CSS transition, you can increase or lower the speed by changing the 0.12s value.