文字にグラデーションをかける方法

コード例

See the Pen
【CSS】文字にグラデーションをかける方法 by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.

HTML

<h2>文字にグラデーションをかける</h2>

CSS

h2 {
  display: inline-block; // グラデーションの領域をテキストの横幅に合わせる。
  background: linear-gradient(90deg, red, blue); // 背景にグラデーションをかける。
  -webkit-background-clip: text; // 背景を文字の形に切り取る。
  -webkit-text-fill-color: transparent; // 文字を透明にする。
}

文字にグラデーションをかける流れ

グラデーションの領域をテキストの横幅に合わせる

h2 {
  display: inline-block;
}

まず、pタグやhタグのようなブロック要素の場合はインラインブロック要素にしましょう。
そうすることで、グラデーションの領域をテキストの横幅に合わせることができます。

spanタグなどインライン要素であれば指定は不要です。

背景にグラデーションをかける

h2 {
  background: linear-gradient(90deg, red, blue);
  background: -webkit-linear-gradient(0deg,red, blue);
}

linear-gradient関数を使用して、背景にグラデーションを付与します。
linear-gradient関数の使い方についてはこちらをご覧ください。

背景を文字の形に切り取る

h2 {
  -webkit-background-clip: text;
}

-webkit-background-clipプロパティを使用して、背景を文字の形に切り取ります。

文字を透明にする

h2 {
 -webkit-text-fill-color: transparent;
}

-webkit-text-fill-colorは文字の色を指定できるプロパティです。
colorプロパティの指定があった場合、-webkit-text-fill-colorプロパティの指定が優先されます。

transparentを指定し文字を透明にすることで、文字形に切り取った背景のグラデーションが表示されます。

See the Pen
【CSS】文字にグラデーションをかける方法 by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.