CSSだけで作る！動く背景グラデーションの実装方法｜linear-gradient＋アニメーション

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトの背景に、静止したグラデーションではなく、ゆるやかに動くアニメーションをつけたいと思ったことはありませんか？

JavaScriptや外部ライブラリを使わず、CSSだけで実現できる方法があるんです！

今回は、linear-gradient・background-size・@keyframesを活用した動く背景表現を、シンプルな例から応用例までわかりやすく紹介します。

実装が簡単なのに、サイト全体の印象がぐっと変わるテクニックなので、ポートフォリオやランディングページの背景演出にもおすすめです。

基本：CSSでグラデーション背景を動かす仕組み

ポイントは、背景画像を大きめに設定し、background-positionをアニメーションで移動させること。

まずは最小構成のサンプルです。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

グラデーション色を複数指定しておくと、滑らかに変化しているように見えるのがポイントです。

応用：角度を変える＆速度を調整する

背景グラデーションは linear-gradient() の角度を変更すれば、斜めや縦方向に動く演出も簡単に作れます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

animation-duration（上記では10秒）を短くすれば速く、長くすればゆっくり動く背景に。

応用：hover時だけ動かす

常時動かさず、マウスホバー時にだけ動く演出も可能です。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

ユーザーが操作したときだけ動くため、動きすぎないUIを目指したいときに最適です。

パフォーマンス注意点

CSSアニメーションは比較的軽量ですが、背景サイズを大きくしすぎるとパフォーマンスに影響します。

背景サイズは2〜8倍程度を目安に調整し、必要なら will-change: background-position; を指定してパフォーマンス改善すると良いです。

まとめ

satokotadesignキャンペーン実施中！