CCSで文字にグラデーションをかけ影を付ける

まず初めに

まず、background-clipを使用し、ただ単にグラデーションをかけたものが以下になります。

See the Pen text gradation by S-Chenn (@s-chenn) on CodePen.

次に

text-shadowを付けます。すると、以下のようになります。
文字を透明色にし背景色を透過する事によってグラデーションのかかった文字を表示するためtextshadowまでもが透過され以下のように全体的に滲んでしまったり、意図したデザインになってしまいます。

See the Pen text gradation & shadow by S-Chenn (@s-chenn) on CodePen.

最後に

そこで、もとのテキストにはtext-shadowだけを当て、その上からグラデーションかけたテキストの擬似要素を被せることで、以下の様に文字の周りだけにtext-shadowを付けることが出来ます。

See the Pen gradtion & shadow2 by S-Chenn (@s-chenn) on CodePen.

※注意点

Internet Explorerではbackground-clipをサポートしていないため、上述の方法は使えません。