どうも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;
}
![sample.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fd6e25b1b-4f01-9d7b-76ee-f36133c89aea.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6c9c53b0835764f6b749145b37f45267)
まとめ
background-clip
自体はIEでも使えるが、background-clip: text;
だけIEで使えない。
・・・なぜ、textだけ。