<p class="effect">Hello.</p>
<p>Works in Firefox 22+, Chrome, Opera 15+ + fallback Safari IE</p>
<svg height="0">
  <filter id="filter">
    
    <!-- faking background-clip:text -->
    <feImage xlink:href="http://www.css3create.com/squelettes/images/articles/grass-texture.jpg" width="450" height="450" />
    <feTile />
    <feComposite in2="SourceGraphic" operator="in" result="r1"/>
    
    <!-- add an outer shadow -->
    <feFlood in="sourceAlpha" flood-color="rgba(0,0,0,.9)" />
    <feComposite in2="SourceAlpha" operator="in" />
    <feGaussianBlur stdDeviation="3"/>
    <feOffset dx="0" dy="6" result="r2"/>
    
    <!-- merge -->
    <feMerge>
      <feMergeNode in="r2"/>
      <feMergeNode in="r1"/>
    </feMerge>
    
  </filter>
</svg>

.effect {
  font: bold 12em sans-serif;
  text-align: center;
  margin: .5em 0 0 0;
  color: green; /* fallback */
  text-shadow: 0 6px 3px rgba(0,0,0,.9)
}

/* if -webkit-background-clip: text and @supports are supported */
@supports (-webkit-background-clip: text) {
    
    .effect {
        background: url('http://www.css3create.com/squelettes/images/articles/grass-texture.jpg');
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; 
        -webkit-filter: drop-shadow(0 6px 3px rgba(0,0,0,.9));
        text-shadow: none;
    }

}

/* if -webkit-background-clip: text is not supported, but @supports is :) */
@supports not (-webkit-background-clip: text) {
    
    .effect {
        filter: url('#filter');
        text-shadow: none;
        user-select: none;
    }

}


html {
  background: #222;
  text-align: center;
  color: #aaa;
}