htmlとcssだけで文字にグラデーションする方法

１　Illustratorを使わないでも、文字装飾に役立つ　

文字装飾って簡単なようで、結構大変ですよね。ぼかしたり、カーニング（文字の間隔を調整したり）、グラデーションしたり、袋文字にしたり・・・

文字をグラデーションしたい場合は、Illustrator appearance機能を使ってバナーのようにしないかと思います。

でも良い方法が見つかりました。htmlとcssだけで出来てしまいます。

２　手順

（１）文字のある＜h2>タグなどのブロック要素のbackgroundをグラデーションする

background: -webkit-linear-gradient(30deg,#065ef6,#bc65dc,#eb5234);

（２）テキストの文字の色を透明（transparent)にする

このプロパティが設定されていない場合、colorプロパティの値が使用されます。

（３）background-clipプロパティー（-webkit-background-clip: text;）で、要素の背景をtextでくり抜く

今回使うプロパティー（属性）は、background-clip: textです。　

ちなみにpropertyの語源は、pro（前へ　引用例　prologue（序章））とラテン語の（propria …「固有の、特有の」）が合わさってできたものだということです。　

参照：MDNのbackground-clip - CSS: カスケーディングスタイルシート （https://developer.mozilla.org/ja/docs/Web/CSS/background-clip）

３　まとめ

うまくいきましたでしょうか？！便利な機能、是非、使ってみてください。

自分も使っていきます。