JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>

CSS

body {
    background: #441369;   
}

h1#gradient {
    text-align:center;
}
h1#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
 		background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
   		-webkit-background-clip: text;
   		-webkit-text-fill-color: transparent;
        text-shadow:none !important;
    }
    h1#gradient span:after {
        content: attr(data-text);
        left: 8px;
        position: absolute;
        background: url(http://i.imgur.com/RkDRMcJ.png);
        -webkit-background-clip: text;
   		-webkit-text-fill-color: transparent;
        text-shadow: -4px -4px 0px #441369, -1px 0px 0px rgba(255, 255, 255, 0.1);
        top: 8px;
        z-index: -1;
        width: 100%;
    }
}