今回はCSSだけでテキストにグラデーションを掛ける方法を紹介していきます！ CSSのみでテキストグラデーションを実装できれば、メンテナンス性も向上するのでぜひ、積極的に使っていきましょう！！テキストにグラデーションを掛けるために画像を切り出して、文言修正するときはもう一度切り出して．．．。なんていう黒歴史にはサヨナラしたいですね♪

はじめに

CSSのみでテキストにグラデーションを掛けるためには「background-clip」というプロパティが必要になります。

「background-clip」は比較的新しいプロパティなので対象ブラウザで対応しているか確認をお願いします！！

以下のリンクから確認することが出来ます。

https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

実装の前に「background-clip」とは何なのかをザックリ把握しておきましょう。（あとでちゃんとやりますｗ）

background-clipとは？

「background-clip」は「background」で指定した背景色がどのエリアまで反映されるのかを制御するために使用します。

値は下のようになります。

• border-box：背景色がボーダーのエリアまで付く（いつもどおり）
• padding-box： 背景色がパディングのエリアまで付く
• content-box：パディングの内側のコンテントエリアまで付く
• text：テキストのみに付く

今回使うのは「background-clip: text」になります！

実装してみた！

実装はとても簡単です！

必要なのは、

• 背景にグラデーションを敷く：background: linear-gradient()
• 文字の色(今回は透過)を指定する：color: transparent
• 先ほど紹介した：background-clip: text;

のみになります。

@import url(https://fonts.googleapis.com/css?family=Pinyon+Script);

.text_gradient {
  background: linear-gradient(-60deg, #e60012 10%, #009fe8 90%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  
  /* ここは関係ない記述 */
  display: inline-block;
  margin: 0;
  font-size: 50px;
  font-weight: bold;
  font-family: 'Pinyon Script';
}

See the Pen テキストにグラデーションを掛けてみた！ by カノト (@kanoto) on CodePen.

注意点！

最後に注意してほしい点があります！

「background-clip」は背景色をクリッピングするという特徴があるので、テキストの大きさとコンテンツの大きさを合わせる必要があります。

そのため、コンテンツをテキストの大きさに合わせることが出来る「display: inline」や「display: inline-block」がオススメです。

つまり、どういうことかというと。この図のようなイメージになります。

横幅が長くなるとテキストが青背景のところしか被らないので、ほぼ青文字になってしまう感じですね！

みなさんもぜひ、「background-clip」を使ってみてくださいね～♪