3D CSS Text

The 3D CSS text generator uses the sensational power of text-shadow to create thrilling
text and icons that almost reach out and grab you through the magic of The 3rd Dimension!

Works in the latest builds of Firefox, Chrome, Safari, Opera and now IE10!

Highlight the text to edit.

-
Reset





:

Important! You'll need to download the Iconic Font by PJ Onori in order to use it. It is available under a Creative Commons license.Follow the example in the download package to implement.

/* Apply this class to some text to add 3d text effect! */
.3DText {
font-family:;
line-height:1em;
color:;
font-size:;
text-shadow:;}

/* The background color for the body */
body {
background-color:#454545;}

/* This class can be applied to a div to achieve the light gradient effect on this page. A height will have to be applied to your page specifications */
.gradient{
position:absolute;
background-image:-moz-radial-gradient(135deg, #000, #333 100%);
background:-webkit-gradient(radial, 40% 0%, 0% 100%, from(#333), to(#000000));
opacity:.3;
width:100%;
z-index:-1;}