CSS でテキストの線をグラデーションにする
Published Jan 22, 2025
⋅
Updated Mar 12, 2025
CSS でテキストの線をグラデーションにするには、CSS でテキストの塗りをグラデーションにする の方法をベースに、text-stroke を使ってテキストの線を透明にして背景のグラデーションが見えるようにする。次の例では、暗い背景に馴染むように color を black にし、 mix-blend-mode を screen にしている。
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;
}参考