動くグラデーション背景
複数色のグラデーションがゆっくり左右に流れ続ける、動きのある背景です。仕掛けは、グラデーションを background-size:400% 400% と画面より大きく引き伸ばし、 @keyframes で表示位置を往復させること。色そのものは動かさず「見ている窓を動かす」発想なので、滑らかで処理も軽めです。
解説
複数色のグラデーションがゆっくり左右に流れ続ける、動きのある背景です。仕掛けは、グラデーションをbackground-size:400% 400%と画面より大きく引き伸ばし、@keyframesで表示位置を往復させること。色そのものは動かさず「見ている窓を動かす」発想なので、滑らかで処理も軽めです。
使いどころ
映画的でドラマチックなヒーロー、ブランドのトップビュー、登録ページの背景など、印象を強めたい場面に向きます。サンプルは12秒で1往復する穏やかな速度に設定しています。
- 色数や配色は
linear-gradientのカラー列を入れ替えて調整 - 速さは
animationの12sを増減（長くするほど落ち着く） - 最初と最後を同じ色にするとループの継ぎ目が目立たない
常時アニメーションするため、prefers-reduced-motionに配慮し、動きを控えたい利用者には停止させる指定を足すと親切です。文字は動く背景の上でも読めるよう、コントラストを十分に確保してください。
使用例・適したシーン
- ヒーロー背景
- セクション区切り
- フッター前装飾
よくある質問
動く速さを変えるにはどこを調整しますか
animation プロパティの 12s を書き換えます。数値を大きくするとゆっくり、小さくすると速く流れます。落ち着いた印象にしたいときは20秒前後まで伸ばすのもおすすめです。
動きを止めたい利用者への配慮はできますか
はい。prefers-reduced-motion のメディアクエリで animation を none にする指定を追加すれば、動きを減らす設定の利用者には静止した状態で見せられます。アクセシビリティ上も推奨される配慮です。