グラデ流れ文字
background-clip:text を使い、藍系グラデーションが左から右へ流れ続ける見出し演出。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- ブランドカラーの見出しに光を流す
- JS なしの常時装飾
- 1〜2 行の短い見出し
- 避ける場面
- 本文・小さな文字（にじんで読みにくい）
- 背景と近い色のグラデ（対比が不足）
- 構成要素
- グラデーション見出し
- 流れる光の帯
- サブテキスト
- 持っている状態
- 通常
- キーボード
操作なし（自動で流れ続ける装飾）
- 支援技術
見出しは h2 の通常テキストで読み上げに影響しない。文字色は透明＋背景クリップなので背景との対比を確保。reduced-motion で流れを止め静止グラデ
- 動き
background-position 0%→200% を 3s linear 無限。光が左から右へ流れ続け、見出しを主役にする
デザインの要点
- background-size: 200% にして background-position を 0→200% 動かす。両端の色を同じ #2b50c7 にすると継ぎ目が見えない
- 3s linear の無限ループ。ease を付けると周期ごとに減速して「息継ぎ」が見え、流れではなく往復に見える
- グラデは明るい帯（#a8bfff）を 45% に 1 本だけ置く。帯が多いと文字が縞になり、輪郭が読めない
- -webkit-text-fill-color: transparent が必須。color: transparent だけでは Safari で文字が消える
コード（コピーして使えます）
<div class="gf-wrap">
<h2 class="gf-text">Gradient<br>Flow Text</h2>
<p class="gf-sub">文字に光が流れる</p>
</div>