gradient text in css with text shadow

Solution 1:

You can combine with filter: drop-shadow CSS property that will make the trick.

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px #333);
}

<h1>Example</h1>

Solution 2:

updated

Found a solution for you, only problem is it requires the html to have a attribute.

http://jsfiddle.net/2GgqR/2/

h1 {
  font-size: 72px;
  background-image: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;  
}

h1:after {
  background: none;
  content: attr(data-text);
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
  text-shadow: 1px 1px 2px #000;
}

original is here :) http://viget.com/inspire/background-clip-text-shadow-gradients

updated link from comments http://jsfiddle.net/2GgqR/5/

here I added the background color of the background to the :after

h1:after {
  background: #f3f3ee;
}

.background{
    background-color: #f3f3ee;
    position: relative;
    z-index: 1;
}

Solution 3:

I may be really downvoted for this, but I believe that the only way to do that, would be to have a duplicate element positioned behind. This is just an idea.