gradient text in css with text shadow

Question

Is there anyway to use this text gradient method and also have a drop shadow on the text. http://css-tricks.com/snippets/css/gradient-text/

When I set my dropshadow like

text-shadow: 1px 1px 2px #000;

Then it messes up my text gradient because the background is set to transparent. Does anyone know of a solution to this for webkit browsers.

Answer 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>