#まず初めに
まず、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をサポートしていないため、上述の方法は使えません。