Create a shadow text effect with HTML5 and CSS .

This tutorial is simple because I used HTML5 and CSS.
The CSS source code is simple (see: font-size:13px or you can use any size, colors , background).
I used my jsfiddle account to test and run it.
Create a project into jsfiddle editor and add this source code.
Into HTML5 area the source code can start with your text into div tag and named class font_001.
You can add span tag to have display block CSS style.
Into CSS area the source code is this:

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

body {
  line-height: 2.5;
  margin: 0;
  background: #1F4C6F;
  font-family: 'Work Sans' sans-serif;font-size:13px;
}

.font_001 {
  max-width: 50%;
  margin: 0 auto;
}

h1 {
  color: #fff;
  font-weight: 810;
  padding-top: 4rem;
  margin: 0;
  text-transform: uppercase;
  font-size: 3em;
  line-height: 1.8;
  color: #3C6FB0;
  text-shadow: 20px 5px 30px rgba(0,0,0,.2), -30px 10px 30px rgba(0,0,0,.1), 
-40px 10px 30px rgba(0,0,0,.1), -3px 2px 5px #1F4C6F, 3px -2px 5px #3C6FB0;
}

h1 span {
  display: block;
  
}