ひしもち 
ポートフォリオサイト作成中。亀の歩みです；
今回は、そこで使いたくて調べた「テキストカラーをグラデーションにする方法」のご紹介です。
私が作りたかったのはこういう感じのもの。グラデーションを使った、プレスエンボス風のテキストです。
この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いたものです。記事の内容は、2015年4月8日に書かれています。
結局この方法は現段階できつねブラウザに未対応なため、実用性には欠けるのですが、いつか使える日が来た時のために大切に残しておこうと思います。
上下のシャドウとハイライトはどちらも「text-shadow」でいけそうなので、テキスト本体にグラデーションを掛ける方法を探しました。（colorにlinear-gradientが効けばいいのにね！）
グラデーション画像を用意してマスクする方法があるようですが、今は「linear-gradient」を使えばグラデーションもCSSのみで実装可能なので、画像無しでオッケーです。
一番シンプルなのがこれ。
背景を文字でマスクして切り抜く方法です。文字にグラデーションを掛けるだけなら、これが一番手っ取り早そうです。ただ、「background-clip」はベンダープレフィックス「-webkit-」必須で、webkit系のブラウザにしか対応していません。
しかも、今回の問題はもうひとつあって、私はこれをプレスエンボス風にしたかったから「text-shadow」を追加したんですよね。
するとこうなりました。
グラデーションどこいったんよ！
答えは簡単で、このグラデーションは背景なので、テキストシャドウよりも後ろにあるワケです。
先ほどのコードでは、文字色を透明にしてマスクしたので、後ろのシャドウだけが透けて見えてる状態になっちゃったんです。
テキストシャドウっていうのは、普段透過されていないテキストで隠れているだけで、ちゃんとテキストの大きさ分存在していたんですねー。
じゃあこの後ろに擬似要素で同じ大きさのテキストにシャドウを掛けて下に重ねればいいんじゃない！？
と思ってやってみたんですが、それもだめでした。一番上のテキストの形でマスクされてるから、その形より外側に出る（下に重ねられた）シャドウ部分は隠れちゃうんですね； そりゃそうだよね；
何か他に方法はないのか、ともう一度Google先生にお尋ねしてみると……ありました！ 最近（私の中で）流行りの擬似要素を使った方法が！
それがこれ！
こちらもマスクを使っていて、webkit系ブラウザのみ対応ですが、ちゃんと「text-shadow」が一緒に使えます！
仕組みはさっきの逆。
単色のテキストの上に、グラデーションでマスクを掛けた別色のテキストを重ねています。文字の形にくり抜いてるわけではないため、文字からはみ出るシャドウもちゃんと表示されますね。やったー。
これで無事に、目的のものが作れました:)
でも、webkit系でしか表示されないのがちょっと気になります。Firefoxでもちゃんと表示されるような方法は、何かないのでしょうか？ 今は画像作るしかないのかなー。
ご存知の方がもしおられましたら情報ください。よろしくお願いします！