osgsm.io
HomeNotesCSS でテキストの線をグラデーションにする

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

Published Jan 22, 2025
Updated Feb 16, 2025

CSS でテキストの線をグラデーションにするには、CSS でテキストの塗りをグラデーションにする の方法をベースに、text-stroke を使ってテキストの線を透明にして背景のグラデーションが見えるようにする。次の例では、暗い背景に馴染むように colorblack にし、 mix-blend-modescreen にしている。

Gradient Text

div {
  -webkit-text-stroke: 2px transparent;
  text-stroke: 2px transparent;
  mix-blend-mode: screen;
  background: radial-gradient(circle at center, rgb(240, 50, 50), rgb(50, 50, 255));
  background-clip: text;
  color: black;
}

参考