【CSS】テキストにグラデーションを設定する方法

こんにちは、Ryohei（@ityryohei）です！

タイトルや文章といったテキストの色をグラデーションで表示する方法のご紹介です。

デザインカンプにグラデーションのテキストを実装する方法として、該当テキストをスライスしてそのまま画像として表示される方法が一般的ですが、実はいくつかのプロパティを使用することでCSSだけでも簡単にグラデーションテキストを実装することができます。残念ながらIEには対応していないプロパティになりますが、ChromeやSafari、Firefoxといった主要の最新ブラウザには対応していますので、十分実用できるプロパティとなっています。

本記事の内容

• グラデーションの背景を設定する
• 背景をテキスト内にだけ表示する
• テキストカラーを透明にする

本記事では下記のタグのテキストをグラデーションにしながら、一つずつ詳しく解説していきます。

<h1>Into the Program</h1>

では、解説していきます。

グラデーションの背景を設定する

まず最初に、上記でご紹介したh1要素にグラデーションの背景を設定します。

要素に背景を設定するのは、皆さんご存知の「background」プロパティです。いつも使用してる「backround」にinear-gradientというCSSの関数でグラデーションを設定します。

使い方は簡単です。下記のように記述します。linear-gradientの()の中には実際にグラデーションを設定を記述します。

background: linear-gradient(ここにグラデーションの方向や色を指定);

では、実際にグラデーションを設定してみます。

CSS

h1 {
  background: linear-gradient( to right,  rgba(69,179,224,1) 25%, rgba(102,51,153,1) 75% );
}

上記のスタイルにフォントサイズ等を追加したものが下記になります。

See the Pen
Gradient Text1｜CSS by ryoy (@intotheprogram)
on CodePen.

h1タグの背景がグラデーションになったかと思います。

続いてh1タグのテキストでグラデーションの背景をマスクしてテキスト内にグラデーションを表示していきます。

背景をテキスト内にだけ表示する

要素の背景にグラデーションが表示されましたら、続いては背景のグラデーションをテキスト内にだけ表示するためのプロパティを指定します。指定するプロパティは下記になります。値には「text」を指定します。

-webkit-background-clip: text;

上記のプロパティを指定することにより、背景に設定している色や画像をテキスト内にだけ表示することができます。

実際に「-webkit-background-clip」のプロパティを要素に指定して表示を確認してみます。

CSS

h1 {
  background: linear-gradient( to right,  rgba(69,179,224,1) 25%, rgba(102,51,153,1) 75% );
  -webkit-background-clip: text;
}

「-webkit-background-clip」を追加すると下記のような表示になります。

See the Pen
Gradient Text2｜CSS by ryoy (@intotheprogram)
on CodePen.

背景のグラデーションは表示されなくなりましたが、テキストの色は黒や設定している色で表示されているかと思います。

原因はテキストの色にあります。テキストの色はデフォルトでは「black」になっています。そのため「-webkit-background-clip」を設定して背景をテキスト内に表示させるようにしても、テキストの色が優先されるため、背景のグラデーションがテキスト内に表示されない状態となります。

うまくグラデーションを表示させるためには、テキストの色を透明にする必要があります。

テキストの塗色を透明にする

こちらで最後の工程になります。テキストの色を透明にして切り抜かれた背景のグラデーションをテキスト内に表示します。

テキストの色を透明にするには、よく使用する「color」プロパティに下記の値を設定します。

color: transparent;

実際にCSSに設定してみます。

CSS

h1 {
  background: linear-gradient( to right,  rgba(69,179,224,1) 25%, rgba(102,51,153,1) 75% );
  -webkit-background-clip: text;
  color: transparent;
}

下記はこれまでご紹介したすべてを設定を実装したデモになります。

See the Pen
Gradient Text3｜CSS by ryoy (@intotheprogram)
on CodePen.

無事、グラデーションのテキストが表示されているかと思います。

まとめ

本記事でご紹介したHTMLとCSSの内容をまとめます。

HTML

<h1>Into the Program</h1>

CSS

h1 {
  background: linear-gradient( to right,  rgba(69,179,224,1) 25%, rgba(102,51,153,1) 75% );
  -webkit-background-clip: text;
  color: transparent;
}

DEMO

See the Pen
Gradient Text3｜CSS by ryoy (@intotheprogram)
on CodePen.

グラデーションの設定については「CSS グラデーション ジェネレーター」等で検索すると多くの結果が得られると思いますので、そちらを活用していただければと思います。

IEの対応について

最後に、IEの対応について少しお話しておこうかと思います。

本記事でご紹介した下記のプロパティはIEに対応していません。

-webkit-background-clip: text;

そのため、IEではグラデーション表示はせずに単色の色でテキストを表示する方法が無難かと思います。具体的には、下記のようにIEにのみ反映されるメディアクエリを使用します。

@media all and (-ms-high-contrast: none){
  h1 {
    background: #fff;
    color: #000;
  }
}

今後、IEが「background-clip」に対応する可能性は低いと思いますので、「background-clip」を使用する際はIE用の設定も一緒にしておくと良いかもしれません。

以上、CSSでテキストにグラデーションを設定する方法のご紹介でした！