こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSだけで「オーロラがふわっと揺れる背景」を作る方法をご紹介します。
最近、Webデザインの世界では“光の表現”がトレンドになっていて、
特にオーロラのようなゆらぎ・グラデーション・透明感を使った演出は
ヒーローヘッダーやキービジュアルとの相性が抜群です。
「動画を使うほどではないけど、少しリッチな動きを入れたい」
「JavaScriptなしで軽いアニメーションを実装したい」
という場面にもぴったり。
この記事では、
CSSだけで作れるオーロラ背景の実装方法とアレンジ方法を
コピペで使える形で分かりやすく解説していきます。
CSSだけで作るオーロラ背景の基本構造
オーロラの特徴は
・色がなめらかに混ざる
・ランダムに揺れているように見える
・少し透けていて奥行きがある
という点です。
CSSではこれを
グラデーション × 不規則なノイズ的動き × 透明感
で再現します。
実際のコード（コピペOK）
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
なぜ3枚重ねるの？
オーロラのような光は
色のレイヤーが重なった時に生まれる“にじみ感”が大切です。
1枚だとただのグラデーションですが、
3枚以上重ねることで
・奥行き
・揺らぎのランダム感
・自然な光の混ざり
が生まれ、より本物らしい雰囲気になります。
アレンジ：より柔らかい光にする
以下の調整でエモい柔らかさが出ます。
- filter: blur(120px); に上げる（とろける光）
- opacity: 0.3 で淡い雰囲気に
- mix-blend-mode: lighten に変更してふんわり混ざる
背景として実用できる場面
- ヒーローヘッダーの背景に
- ライブイベント・音楽系サイトの世界観演出
- LPで“特別感”を出したい時
- IT系サービスで近未来感演出
CSSだけで軽いので、WebGLや動画に比べて
読み込みが速く、パフォーマンスも良好です。
まとめ
CSSだけで「オーロラの揺れ」を表現できると、
サイトに一気に特別な雰囲気が生まれます。
・グラデーションを重ねる
・ゆっくり動かす
・ブラーで光を広げる
この3つのポイントを押さえれば、
動画なしでもリッチなビジュアルを作れます。
あなたのサイトの世界観づくりに、ぜひ取り入れてみてください。
satokotadesignキャンペーン実施中！
