CSS でテキストの塗りをグラデーションにする

テキストカラーをグラデーションにするには、グラデーションにしたい要素の background を radial-gradient() などでグラーデションにし、 background-clip: text を使ってテキストでそのグラーデションを切り抜く。 color は transparent にしておく。

div {
  background: radial-gradient(circle at center, rgb(240, 50, 50), rgb(50, 50, 255));
  background-clip: text;
  color: transparent;
}

この方法を応用して、CSS でテキストの線をグラデーションにする こともできる。

参考

• background-clip - CSS: Cascading Style Sheets | MDN
• radial-gradient() - CSS: Cascading Style Sheets | MDN