グラデーション文字（流れるアニメ付き）
文字そのものに動くグラデーションを乗せる見出し用パーツです。仕組みは background に横方向の linear-gradient を敷き、 background-clip:text と color:transparent で塗りを文字の形だけに切り抜くというもの。
解説
文字そのものに動くグラデーションを乗せる見出し用パーツです。仕組みは background に横方向の linear-gradient を敷き、background-clip:text と color:transparent で塗りを文字の形だけに切り抜くというもの。background-size:200% auto で色帯を画面より広く取り、@keyframes で background-position を端から端へ動かすことで、色が左から右へ流れて見えます。JavaScript は不要で、CSS だけで完結します。
こんな場面に向きます
- ブランドサイトのキャッチコピーやファーストビューの主見出し
- 料金表やキャンペーンの「無料」など一語だけ強調したいとき
- 暗い背景の上で華やかさを足したいロゴ風タイトル
色を変えるときは linear-gradient 内の色を 2〜4 色に差し替えるだけで雰囲気が変わります。先頭と末尾を同じ色にするとループの継ぎ目が目立ちません。流れる速さは animation の 4s を増減して調整します。注意点として、color:transparent を使うため背景画像や薄い地色だと文字が読みにくくなることがあります。コントラストを確保し、prefers-reduced-motion を尊重して動きを抑える配慮があると親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
グラデーションの色はどう変えますか
CSS の linear-gradient(90deg, ...) に並んだ色コードを好きな色に書き換えるだけです。2色でもきれいに見えますが、3〜4色にすると流れる変化が豊かになります。最初と最後を同じ色にするとループの切れ目が目立ちません。
JavaScript は必要ですか
不要です。背景の切り抜きとアニメーションはすべて CSS で行っています。ただし background-clip:text はベンダープレフィックス -webkit- も併記しておくと、より多くのブラウザで安定して表示されます。