「黒文字だけでは、どこか味気ない」 そう感じたら、テキストに「色の移ろい」をプラスしてみませんか？
この記事では、文字の形に背景を切り抜くbackground-clipプロパティを使った、美しいグラデーションアニメーションを5つ紹介します。 オーロラのように揺らめく色や、高級感あるゴールドの輝きなど、CSSだけで実装できる軽量かつモダンな演出です。SWELLですぐに使えるコードを厳選しました。
Aurora Flow（オーロラ・フロー）
青、紫、ピンクが混ざり合いながら、オーロラのようにゆっくりと色が移り変わります。幻想的で優しい印象を与えます。ホバーすると色が鮮やかになり、動きが少し速くなります。
See the Pen Aurora Flow by BaseKENT (@basekent) on CodePen.
調整方法
- 色の変更:
linear-gradient内のカラーコード（#23d5ab等）を好きな色に変更してください。3色以上入れると綺麗です。 - 速度:
animation: auroraMove 6sの秒数を変えることで、色の変化スピードを調整できます。
Gold Shimmer（ゴールド・シマー）
高級感のあるゴールドのグラデーションの中を、白い光（シマー）がキラリと走り抜けます。ラグジュアリーなブランドや特別なコンテンツに最適です。ホバーで光が強くなります。
See the Pen Gold Shimmer by BaseKENT (@basekent) on CodePen.
調整方法
- 光の太さ: グラデーション内の
%の間隔を調整すると、白い光の太さが変わります。 - シルバーにする: カラーコードを
#ccc（銀）や#fff（白）の組み合わせに変えれば、シルバー・メタリックになります。
Spotlight Reveal（スポットライト・リヴィール）
暗めの文字の上を、円形のスポットライトが左右に行ったり来たりして照らします。ミステリアスで注目度の高い演出です。ホバーするとライトが全体に広がります。
See the Pen Spotlight Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- ライトの色:
#000を赤や青に変えると、色付きのサーチライトになります。 - ライトの範囲:
background-size: 50% 100%の50%を小さくすると、より狭い範囲を照らすようになります。
Diagonal Stripe（ダイアゴナル・ストライプ）
理髪店の看板（バーバーポール）や工事現場のテープのように、斜めのストライプが動き続けます。ポップでエネルギッシュな印象です。ホバーするとストライプが逆回転します。
See the Pen Diagonal Stripe by BaseKENT (@basekent) on CodePen.
調整方法
- 縞模様の太さ:
10px,20pxの数値を変更して調整します。 - 色:
repeating-linear-gradient内の色を変更します。黒×黄色にすると「立ち入り禁止（KEEP OUT）」風になります。
Liquid Neon（リキッド・ネオン）
複数の鮮やかな色が液体のように混ざり合い、ぐにゃぐにゃと変化し続けます。トレンド感のある「Y2K」やサイバーパンクなデザインに合います。
See the Pen Liquid Neon by BaseKENT (@basekent) on CodePen.
調整方法
- 色の組み合わせ: 原色に近い明るい色を多用すると、より「リキッド（液体）」感が出ます。
- 発光感:
filter: drop-shadowを削除すれば、発光のないフラットなデザインになります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
