CSSでテキストにグラデーションを掛けてみた！

2019年7月25日

今回は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.