【CSS】文字にグラデーション効果を付ける方法！

この記事は備忘録として書き残します。

やり方

    color:#232633;
    background: -webkit-linear-gradient(to right,#232633,#4a69bd);
    background: linear-gradient(135deg,#f44242,#ffbaba);
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
}

background: linear-gradient(to right,#232633,#4a69bd);

⇧の部分はお馴染みかと思います。
背景にグラデーションを付ける時に使います。

-webkit-background-clip:text;

⇧の部分で背景の範囲をテキストに指定します。

-webkit-text-fill-color: transparent;
⇧部分で文字を透過させます。

結果文字にだけ、グラデーションがかけられます。


流れとしては

1. 背景全体にグラデーションをかける。
2. 背景の範囲を文字にのみ適応する。
3. 文字を透過させる
4. 文字の後ろにあった色が見える
5. グラデーション効果適応

注意点

webkitが必要です。

また、非対応のブラウザのためにcolorを指定しておくといいでしょう。