SOURCE

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

/* Custom Stylesheet */
body{
    background-color:#fff6e6;
}

.nav-top a {color: #fff;}
 
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: 23px;
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
      background: -webkit-gradient(linear,left top,left bottom,from(blue),to(red));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:none !important;
    }
    h1#gradient span:after {
        content: attr(data-text);
        left: 4px;
        position: absolute;
        background: none; /* image source for your texture */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: -4px -1px 0px yellowgreen, -1px 0px 0px rgba(255, 255, 255, 0.1);
        top: 4px;
        z-index: -1;
        width: 100%;
    }
}