Home / Note

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

Created on

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;
}

参考