CSSで文字にグラデーションをかける方法を解説！
CSSで文字にグラデーションをかける方法を解説します。CSSで文字にグラデーションをかけることで、綺麗な色でなおかつユーザーに対して強調することができます。主にCSSのlinear-gradientを用いて、手順を踏まえて解説します。
CSSで文字にグラデーションをかけたい
CSSで文字にグラデーションをかけて、ユーザーに対して強調して何かを伝えたい、または見出しとして強調したいということがあります。
ここでは主に古いブラウザにも対応させるために-webkit-のベンダープレフィックス付けて、CSSの-webkit-linear-gradientを用います。
CSSで文字にグラデーションをかける方法
それでは順番にCSSでテキストにグラデーションをかけてテキストを虹色にする方法について紹介します。
テキストにグラデーションをかけるための手順
1. 背景色にwebkit-linear-gradientを用いる。
まずbackground: -webkit-linear-gradient(グラデーションの方向や色を指定);でテキストのグラデーションカラーとその角度や方向を決定します。
今回は虹色という事で-webkit-linear-gradientの中に3色と角度を0degとしています。
2. -webkit-background-clipを設定する
今回はテキストにグラデーションかけたいので、 -webkit-background-clip: text;を設定します。これを設定しないと背景がグラデーションになってしまいます。
3. -webkit-text-fill-colorを設定する
2番目までの手順でいけそうな感じはするのですが、そのままだと
テキストの色は設定している色になっています。
そのため-webkit-background-clipを設定して背景をテキスト内に表示させるようにしても、テキストの色が優先されるため、背景のグラデーションがテキスト内に表示されない状態となります。
うまくグラデーションを表示させるためには、テキストの色を透明にする-webkit-text-fill-color: transparentを設定する必要があります。
ではこれまでの手順を踏まえてサンプルコードを用いて、挙動を見てみましょう。
このように上記の手順を踏んで、CSSを設定することでテキストに虹色のグラデーションをかけることができました。
CSSで文字に金色のグラデーションをかける
こちらの方法の手順としては、テキストに虹色のグラデーションをかける方法と全く一緒です。
ただbackground: -webkit-linear-gradientに設定する色の種類が豊富であり、少し複雑です。ここではこのようなこともできるという紹介で、文字に金色のグラデーションをかける方法を紹介します。
ではサンプルコードを用いて挙動を見てみましょう。
このように少しCSSの内容を複雑にすることで、このような金色のグラデーションをかけることも可能です。
まとめ
いかがでしたでしょうか？
文字にグラデーションをかけることで、目につきやすく、ユーザを惹きつけることができます。
ぜひここで紹介した手順を用いて、文字に対して様々なグラデーションを作成してみてください。
