/* 3D Heading Via CSS */ body { background: #5F616C; } h1 { font-family: 'Dosis', sans-serif; font-size: 7em; font-weight: 400; color: #fff; margin: 0.5em 0; text-align: center; /* THIS DOES THE TRICK */ text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, /* end of light grey shadow */ 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, /* end of deep dark shadow */ 0 -1px 20px rgba(0,0,0,0.7); /* some area shadow makes it nicer */ } /* Loosely based on this http://pgwebdesign.net/blog/3d-css-shadow-text-tutorial */
<!-- some nice font from Google Web Fonts --> <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'> <h1>3D Heading Via CSS</h1>