グラデ流れるテキスト
虹色のグラデーションが文字の中をゆっくり横へ流れていく、華やかな見出し表現です。仕組みは、横長のグラデーション背景を background-clip: text で文字の形に切り抜き、文字の塗りを transparent にして背景を透けさせています。
解説
虹色のグラデーションが文字の中をゆっくり横へ流れていく、華やかな見出し表現です。仕組みは、横長のグラデーション背景を background-clip: text で文字の形に切り抜き、文字の塗りを transparent にして背景を透けさせています。その背景の位置を @keyframes で動かすことで、色が流れて見える仕掛けです。両端を同じ色にしているため、ループの継ぎ目が目立たず滑らかに繰り返します。
合うシーン
- クリエイティブ系・デザイン会社のヒーロー見出し
- 新サービスやキャンペーンの目を引くタイトル
- イベントやセールの「映え」を狙ったコピー
色を変えたいときは linear-gradient に並んだ色を入れ替えるだけです。流れる速さは animation の秒数、色の密度は background-size で調整できます。文字が太く大きいほどグラデーションがよく見えるため font-weight は強めが向いています。常に動く演出なので、本文ではなく短い見出しに絞ると読みやすさを保てます。動きを抑えたい利用者向けに prefers-reduced-motion で停止する配慮を入れると親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
グラデーションの色を変えられますか？
変えられます。linear-gradient に並んだ色を好きな配色に差し替えれば自由に変更できます。ループを滑らかにしたい場合は、最初と最後の色を同じにそろえるのがコツです。
流れる速さは調整できますか？
できます。animation に指定した秒数を大きくするとゆっくり、小さくすると速く流れます。色の見える幅は background-size の値で調整します。