グラデーション文字アニメ
文字そのものに虹のようなグラデーションが流れ続ける見出し演出です。仕組みは、文字の背景に横方向のグラデーションを敷き、 background-clip:text と透明な文字色を組み合わせて、背景を文字の形だけくり抜いて見せています。
解説
文字そのものに虹のようなグラデーションが流れ続ける見出し演出です。仕組みは、文字の背景に横方向のグラデーションを敷き、background-clip:text と透明な文字色を組み合わせて、背景を文字の形だけくり抜いて見せています。さらに background-size を横長にして余白を持たせ、@keyframes で背景の位置を左右に動かすことで、色が流れるように見えます。動きは linear infinite で一定速度に繰り返されます。CSSのみで完結し、JavaScriptは不要です。
合わせやすい場面
- サイトのキャッチコピーやヒーロー部の大見出し
- キャンペーンや特集ページのタイトル
- 暗い背景でアクセントを効かせたいロゴ風テキスト
色はグラデーションの指定を差し替えればブランドに合わせられ、流れる速さは animation の秒数で変えられます。注意点として、文字を透明にして背景で見せるため、背景色とのコントラスト確保 が読みやすさの鍵です。濃い背景に明るいグラデーションだと映えます。動き続ける文字は人によって読みにくいので、長い本文には使わず短い見出しに留め、prefers-reduced-motion でアニメーションを止める配慮を入れると親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
グラデーションの色や流れる速さは変えられますか
変えられます。色はlinear-gradientに並べた色を差し替えるだけ、速さはanimationの秒数（例の4s）を増減します。秒数を短くすると速く、長くするとゆっくり流れます。色は2色以上を好きに並べられます。
本文の長い文章にも使えますか
おすすめしません。動き続ける文字は長文だと読みづらく、目が疲れます。短いキャッチコピーや見出しに限って使うのが効果的です。動きが苦手な人へはprefers-reduced-motionで停止させる配慮も入れると親切です。