こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトの印象を大きく左右する「背景演出」。
特に最近では、ページをスクロールしなくても世界観を感じてもらうために、背景アニメーションを使うケースが増えてきました。
中でも僕がよく提案しているのが、CSSだけで雲のようにゆっくり流れていくアニメーション背景。
実は、この演出はJavaScript不要で作ることができ、しかもサイト全体にほんのり“動き”が入るので、雰囲気のあるビジュアルに仕上がります。
また、CSSの負荷も比較的軽く、背景デザインとしても柔軟にアレンジしやすいため、
・自然・アウトドア系のブランド
・リラクゼーション / 温浴施設
・観光 / 宿泊業
・ヒーローヘッダーの演出を強化したい事業
など、幅広いジャンルのサイトに活用できます。
今回はこの「雲のように流れるグラデーション背景」を、多層グラデーション（multi-layer gradient） を使って実現する方法を解説します。
実はこのテクニック、知っておくと他の表現にも展開しやすく、「砂煙」「霧」「光の帯」「炎のゆらぎ」などにも応用できます。
この記事では、
・仕組みの理解
・コピペで使えるコード
・実務で気をつけるポイント
までしっかりまとめました。
それでは本題に入っていきましょう！
多層グラデーションを作る仕組み
背景は、複数のlinear-gradientをレイヤーとして重ねる ことで実現します。
さらに、これらのレイヤーを background-position をアニメーション させることで、「流れている」ように見せます。
ポイント
- グラデーションを複数レイヤーにする
- 各レイヤーの動く速度を変える（パララックス的な動き）
- 透明度を調整して自然な重なりを作る
次はコードを見てみましょう！
コピペで使えるコード
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- 3レイヤー構成で奥行きを演出
- レイヤーごとに移動距離を変え、自然な流れを表現
- 背景色（青空）は自由に変更できる
実務での応用：アプリやLPのヒーローにも使える
- トップページのヒーローヘッダー背景
- 施設サイト（温泉・宿泊・キャンプ場など）
- 癒し系・自然系のブランド演出
- 動画代替として使う軽量アニメーション
画像や動画を使わずに「世界観」を出したいときに非常に便利です。
まとめ
CSSの多層グラデーションを使えば、JavaScriptなしでグラデーションが流れているような背景を実装できます。
動きの速度やレイヤー数を変えることでカスタマイズ性も高く、さまざまなジャンルのサイトに活用可能です。
背景演出を強化したいときに、ぜひ試してみてください！
satokotadesignキャンペーン実施中！
