使うプロパティは、以下の3つです。
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-clip
-webkit-background-clip・・・背景の適用範囲。
webkit-text-fill-color・・・テキストの塗り。
コード
背景グラデーションをアニメーションさせています。
グラデーションを画像に変えることも可能です。
注意点
以下の記述はbackgroundの下に記述します。
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
backgroundの上にしてしまうと、切り抜けません。
