【HTML・CSS】 「テキスト」に「グラデーション」をかける方法

この記事は約3分で読めます。
記事内に広告が含まれています

コーディングのイメージ

こんにちは、さち です。

先日、HTML の「テキスト」に「グラデーション」をかけたいことがありました。

少し複雑だったので、実装する方法を備忘録として記事に残しておきます。

スポンサーリンク

実装方法

実行結果

結果
TEXT

HTML

<span>TEXT</span>

CSS

span {
  /* 背景にグラデーションを指定 */
  background: linear-gradient(to bottom, orange 0%, limegreen 100%);

  /* 背景をテキストの形で切り抜く */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

「背景」にグラデーションを指定して、「テキスト」の形で切り抜くということをしています。

background-clip: text; の効果

「背景」を「テキスト」で切り抜きます。

ただし、正式対応が2023年以降というブラウザーもあるので、ベンダープレフィックス -webkit- がついたものも一緒に書いておいた方が安全です。

各ブラウザーの対応は下記リンク先で確認できます。

→ Background-clip: text - Can I use...

-webkit-text-fill-color: transparent; の効果

テキストの色を「透明」にして、切り抜いた背景が見えるようになります。

color: transparent; でもテキストの色を「透明」にできますが、background-clip: text; に対応していないブラウザーのために、テキストの色を指定することに使ったほうが安全です。

各ブラウザーの対応は下記リンク先で確認できます。

→ CSS property: -webkit-text-fill-color - Can I use...

【余談】 画像を切り抜くことも

今回は背景を「グラデーション」にしましたが、代わりに「画像」にすることで、テキストの形で画像を切り抜くこともできます。

span {
  /* 背景に画像を指定 */
  background: url("img/sample.jpg");

  /* 背景をテキストの形で切り抜く */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

 

 

 

コメント

タイトルとURLをコピーしました