<h2 class="text text-1">Simple Sharp Text Shadow</h2>
<h2 class="text text-2">Fuzzy Text Shadow</h2>
<h2 class="text text-3">Text Shadow To Improve Readbility</h2>
<h2 class="text text-4">Multiple Shadows</h2>
<h2 class="text text-5">Neon Effect</h2>
<h2 class="text text-6">Shadow As Text Outline</h2>
<h2 class="text text-7">Blurred Text</h2>
body {
  background-color: #F5F5F5;
  color: #555;
  text-align: center;
  font-size: 2em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h2 {
  font-weight: 900;
}

.text-3 {
  color: white;
  text-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, 1);
}

.text-1 {
  text-shadow: .1em .1em rgba(0, 0, 0, 0.3);
}

.text-2 {
  text-shadow: .1em .1em .2em rgba(0, 0, 0, 0.6);
}

.text-4 {
  text-shadow: 0.2em 0.5em 0.1em #ddd, -0.3em 0.1em 0.1em #aaa, 0.4em -0.3em 0.1em #888;
}

.text-5 {
  color: #54a;
  text-shadow: 0 0 0.5em #87F, 0 0 0.5em #87F, 0 0 0.5em #87F;
}

.text-6 {
  color: #eee;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
}

.text-7 {
  color: transparent;
  text-shadow: 0 0 .1em rgba(0, 0, 0, 0.2), 0 0 .2em rgba(0, 0, 0, 0.2);
}