CSS でテキストの線をグラデーションにする
Published Jan 22, 2025
⋅
Updated Feb 16, 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;
}
参考