CSSを活用してグラデーション文字を作る方法

シンプルなのに映えるテクニック

グラデーションは、Webサイトを華やかに見せる表現として、よく利用されます。
背景はもちろん、文字にもグラデーションを使った演出は、見た目のインパクトも十分にあります。

文字にグラデーションを施す場合、文字を変更したい場合には作業がめんどうかもしれないなぁ・・・
と思っていませんか？

大丈夫です。CSSだけで手軽に実装する事ができるんです。
今回は、CSSでテキストにグラデーションをかける方法ご紹介します。

グラデーションを付けた実例

それでは早速見ていきましょう。
左から右に向かってグラデーションを施してみます。

テキストにグラデーションを施す

いかがでしょうか。
入力したテキストに対して、グラデーションを施しているので、上記の「テキストにグラデーションを施す」の文字列を選択することができるはずです。

実装方法について

それでは実装していきます。
サンプルは以下のとおりです。

backgroundでグラデーションをつけていきましょう。
サンプルでは3色ですが、2色～付けたいだけ何色でもできちゃいます。
またグラデーションの方向も、to right をto bottom に変更するなどで、色々な方向へも対応できます。

CSSを使って表現しているので、CSSアニメーションを活用して、動きをつけた表現もできそうですね。

CSSで対応する事で、メンテナンス性が向上

文字の変更作業といったメンテナンス性はもちろん、ページ表示に必要なファイル数を減らす事にもつながるので、サイト全体の管理がしやすくなります。

文字を画像にした場合では、スマートフォンで表示した時に横幅が大きすぎて、本文よりも文字が小さくなってしまう…なんて事も起こります。
その時は画面幅に応じて最適化した画像を表示させる事もできますが、ひとつの画像を複数種類用意しなければいけません。
他にも加工元のファイルが見つからない場合もあれば、使っているフォントがない…というケースも想定されますね。

CSSで対応しているので、文字の変更は入力しなおす事で対応できますし、色を変更したい場合でも画像を作り直す必要はありません。

使いどころ注意点

グラデーションはインパクトが強く、デザインの一部として「目を引く」ために有効です。
つい多用したくなりますが、長文の利用は控えめに。
読みやすさとのバランスを大事に、見出しやキャッチコピーなどに利用してみてください。

CSSだけで広がるデザインの可能性

グラデーション文字は、CSSだけで作れるシンプルながら効果的な表現手法です。
「わざわざ画像にしなくても、CSSでできるんですね！」と驚かれることも少なくありません。
こうしたちょっとした演出の積み重ねが、サイト全体の印象をぐっと引き上げてくれます。
特別なライブラリも不要で、すぐに試せるので、ぜひ使いどころを見つけて導入してみてください。