<h1>Two approaches to 3D text</h1>
<h2 class="filter-shadow">Filter Shadow</h2>
<h2 class="text-shadow">Text Shadow</h2>

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 2em;
  background: linear-gradient(180deg, #f14, #ff8300) fixed;
  font-family: "Avenir Next Condensed", sans-serif;
}

h1 {
  color: #613;
  text-align: center;
}

h2 {
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  font-size: 10em;
}

.filter-shadow {
  color: transparent;
  background: linear-gradient(180deg, #fefefe, #bbb);
  background-clip: text;
  filter:
    drop-shadow( -1px -1px white )
    drop-shadow( 1px 1px darken(white, 50%) )
    drop-shadow( 1px 1px darken(white, 52%) )
    drop-shadow( 1px 1px darken(white, 54%) )
    drop-shadow( 1px 1px darken(white, 56%) )
    drop-shadow( 1px 1px darken(white, 58%) )
    drop-shadow( 1px 1px darken(white, 60%) )
    drop-shadow( 1px 1px darken(white, 62%) )
    drop-shadow( 1px 1px darken(white, 64%) )
    drop-shadow( 1px 1px darken(white, 66%) )
    drop-shadow( 1px 1px darken(white, 68%) )
    drop-shadow( 1px 1px darken(white, 70%) )
    drop-shadow( 12px 12px 30px rgba(black, 0.2) )
    drop-shadow( 12px 12px 10px rgba(black, 0.2) )
  ; 
}

.text-shadow {
  color: #f4f4f4;
 text-shadow:
    -1px -1px white,
    1px 1px darken(white, 50%),
    2px 2px darken(white, 52%),
    3px 3px darken(white, 54%),
    4px 4px darken(white, 56%),
    5px 5px darken(white, 58%),
    6px 6px darken(white, 60%),
    7px 7px darken(white, 62%),
    8px 8px darken(white, 64%),
    9px 9px darken(white, 66%),
    10px 10px darken(white, 68%),
    11px 11px darken(white, 70%),
    18px 18px 30px rgba(black, 0.4),
    18px 18px 10px rgba(black, 0.4)
  ; 
}