テキストの色をグラデーションにする

ひとりCSS Advent Calendar 2022 6日目です。

テキストの色をグラデーションにしてみます。

できた

<p class="text-gradient">text gradient</p>

:root {
  --color1: #edb658;
  --color2: #e7719b;
}

.text-gradient {
  font-size: 10vw;
  font-weight: 600;
  font-family: Avenir, sans-sarif;
  color: var(--color1);
  background: linear-gradient(45deg, var(--color1), var(--color2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

メモ

• コツは background-clip と -webkit-text-fill-color
• background-clip
  • https://developer.mozilla.org/ja/docs/Web/CSS/background-clip
  • 要素の背景をどこまで表示させるか指定できる
  • 他の値は border-box padding-box content-box
• -webkit-text-fill-color
  • https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-text-fill-color
  • 文字の塗りつぶしの色を指定する
  • このプロパティが設定されていない場合は color プロパティの値が使用される

遊んでみた