CSS3：CSSだけでテキストグラデーションを作る

See the Pen CSS Only text gradation by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

CSSのみでテキストグラデーションを行う例です。

CSSの中で要のプロパティはこちら。

-webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));

「mask-image」プロパティを使うことで、その対象の透明度の階調を操作することができます。

「Gradation1」の方は文字に対して直接設定しているので、元の白に対して背景色が透けている形なので、背景色が変われば文字の色もその影響を受けます。

「Gradation2」の方は「:before」の擬似要素を元の文字と重なるように生成し、そちらにmask-imageをかけてグラデーションを表現しています。