3D CSS Shadow Text Tutorial

This easy CSS text shadow tutorial will show you step by step how to create 3D font 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 pop out / zoom on hover!

Please keep in mind this 3D CSS text shadow effect is pure CSS (No JavaScript) and the technique only fully works in modern browsers like Firefox, Chrome, Safari and Opera, It will fall back gracefully to plain text when viewed in any Internet Explorer browser.

View Demo

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:

.example-class
{
	text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}

Stacking multiple CSS Shadows

You don’t have to stack multiple css shadows but it does create a better looking 3D CSS text effect.

The Tutorial (Creating the 3D CSS text shadow)

You will want to pick colours darker than the original text colour for the 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.

For this example I’m going to target a H2 tag, but you can target any HTML element, link, class, ID etc.

h2
{
	text-shadow:
	1px 1px 0 #CCC,
	2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
	3px 3px 0 #444,
	4px 4px 0 #444,
	5px 5px 0 #444,
	6px 6px 0 #444; /* end of 4 level deep dark shadow */
}

Well, you can stop there if you like, you have your basic 3D CSS text illusion, using multiple shadows.
However, 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

h2:hover
{
 	/* CSS3 Transform Effect */
  	-webkit-transform: scale(1.2);     /* Safari & Chrome */
  	-moz-transform: scale(1.2);        /* Firefox */
  	-o-transform: scale(1.2);          /* 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

h2
{
	/* 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.

View Demo That’s it! You’ve created your 3D CSS shadow text effect with multiple css shadows!

Share or Save!

List Of Web Design Tutorials Perfect For Beginners

8 Great htaccess rules to improve your website