Home / Note

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

Created on

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

Gradient Text

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

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

参考