3D Text

Use multiple text-shadows to create 3D text on any HTML element. No extra HTML, no extra headaches, just awesomesauce.

by dine

HTML

<h1>Teste</h1>
<p><a href="http://markdotto.com/playground/3d-text/">http://markdotto.com/playground/3d-text/</a></p>

CSS

body {
  background-color: #11a9e2;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0d86b3), to(#11a9e2));
  background-image: -moz-linear-gradient(#0d86b3, #11a9e2);
  background-repeat: no-repeat;
  padding: 100px;
  text-rendering: optimizeLegibility;
  font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
a, a:visited {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  -webkit-transiton: .2s all linear;
}
a:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
h1, h2, p {
  color: #fff;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
h1 {
  margin: 0;
  font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: .2s all linear;
}
h1 {
  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);
}
p {padding: 30px 0 0}