<!-- An example of a very basic box-shadow effect -->
<h2 class="shadow--basic">Shadow</h2>
<h2 class="stroke--basic">Stroke</h2>
<hr>
<h2 class="shadow--larger">Thick Shadow</h2>
<h2 class="stroke--larger">Thick Stroke</h2>

@import url(https://fonts.googleapis.com/css?family=Francois+One);

h2 {
  font-family: 'Francois One', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 6em;
  text-align: center;
  margin-top: 0.2em;
}
hr {
  margin: 1em;
}

.shadow--basic {
  color: #fff;
  text-shadow: 2px 2px 1px #000,
              -2px -2px 1px #000,
              -2px 2px 1px #000,
              2px -2px 1px #000;
}

.stroke--basic {
  color: #fff;
  text-stroke: 3px #000;
}

.shadow--larger {
  color: #fff;
  text-shadow: 4px 4px 0px #000,
              -4px -4px 0px #000,
              -4px 4px 0px #000,
              4px -4px 0px #000,
              4px 0 0px #000,
              -4px 0 0px #000,
              0 4px 0px #000,
              0 -4px 0px #000;
}

.stroke--larger {
  color: #fff;
  text-stroke: 6px #000;
}