どうも7noteです。文字にもグラデーションをつける方法があるってご存知ですか？

グラデーションといえば、背景のbackgroundに指定するのが一般的です。

今回はこのグラデーションを文字に入れたいと思います。

※IEでは効かないので注意！

書き方

index.html

<p>この文字がグラデーションになる</p>

style.css

p {
  width: 5em;
  color: #ACB6E5;   /* IEでは効かないので、代わりの色を指定 */
  background: -webkit-linear-gradient(0deg, #33f, #f33);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}