文字にグラデーションカラーをつけるといえば、イラストレーターなどで画像を用意してからサイト内に配置というのがお約束だったんだけど、CSSだけで実現できるようになりました。
先日の勉強会で習ったばかりのコードをメモ。
最近の新しいCSSは従来のものと分けて「モダンCSS」と呼ぶらしい。
テキストに
グラデーションを
つける！
p.gra {
/* 背景グラデーション */
background: linear-gradient(30deg, #44d0f7, #f900fd);
/* テキストの形に背景を切り抜く */
-webkit-background-clip: text;
background-crip: text;
/* テキストの色を透明にする */
color: transparent;
}