How do I combine CSS "text-shadow" and "background-image: -webkit-gradient"

Question

I am trying to achieve a gradient + text shadow effect in Chrome/Safari using CSS text-shadow and a combination of text-shadow and background-image: -webkit-gradient, see example blw. I can only make one of the effects apply(if I add the shadow the gradient disappears. What am I doing wrong?

h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}

Answer 1

The gradient "disappears" because the text-shadow is on a level above the background.

1. The text (which is transparent)
2. The shadow
3. The background.

We can work around this by copying the text and put it below the original layer, then apply the shadow there, for example:

  h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
  }
  
  h1 div {
    background-image: linear-gradient(white, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute; 
    width: 100%;
}
  h1:after {
    text-shadow: 10px 10px 11px #fff;
    color: transparent;
  }
  
  #hello:after {
        content: 'Hello World';
  }

  <h1 id="hello"><div>Hello World</div></h1>

Answer 2

With no extra HTML markup or pseudo elements you can achieve this effect using the filter property and drop-shadow function. This method also works with a background image vs gradient.

h1 {
  font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
  background-image: linear-gradient(#787878, #484848);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(2px 2px #333);
          filter: drop-shadow(2px 2px #333);
}

Fiddle: https://jsfiddle.net/eywda89g/