코드 미리 보기 : 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;
  position: absolute;
  text-shadow: 1px 1px 2px #000;
  top: 0;
  z-index: -1;
}

위 처럼 css를 하고 아래 처럼 html을 넣으면 된다.

<h1 data-text="hello">hello</h1>

다만 위 코드들은 data-속성, :after과 content : 코드를 지원하는 브라우저면 텍스트에 그림자와 그라데이션 효과를 넣을 수 있다.

출처 : http://stackoverflow.com/questions/15077547/gradient-text-in-css-with-text-shadow