こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
夏の道路やエンジンの上を眺めていると、空気がゆらゆらと歪んで見える――
そんな“陽炎（かげろう）”のような揺らぎを、Webの背景に加えられたら面白いと思いませんか？
今回の記事では、CSSだけで実装できる「熱で揺らぐようなヒートウェーブ背景」を紹介します。
ページの世界観づくりや、ヒーローエリアの演出、クリエイティブな背景のアクセントにぴったりのエフェクトです。
コピペで動くコード付きなので、あなたのサイトにもすぐ導入できます！
CSSで作る「ヒートウェーブ背景」
まずは、もっともシンプルな“ゆらゆら揺れる背景”のコードから。
フィルターのblur と、背景を変形させる filter: url() 相当のぼかし変動をアニメーションで作り、熱の揺らぎっぽい雰囲気を演出します。
HTML
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
背景がじわっと歪んで見える、陽炎らしい揺らめきが表現できます。
より「陽炎感」を出す発展版
よりリアルにしたい方のために、ゆらぎのレイヤーを足して透明な熱の層を前景に重ねるバージョンも用意しました。
HTML
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
透明な揺らぎ層が“空気のゆるい歪み”を再現してくれます。
さらにリアルにするためのテクニック
- ゆらぐ速度を不安定にすると、自然界の熱感に近づく
- 透明レイヤーを複数重ねると立体的な揺らぎになる
- filter: contrast() や saturate() と組み合わせると暑い空気感が増す
- 背景を蜃気楼風の砂色にすると、より“熱い大地”らしさが出る
まとめ
CSSだけで、ここまでリアルな“熱の揺らぎ”が再現できます。
設定を変えれば、砂漠・夏の日差し・工場の熱気など、さまざまな雰囲気を演出することもできます。
背景にほんの少しアニメーションを入れるだけで、ページ全体の世界観がぐっと引き立ちます。
ぜひあなたのサイトにも取り入れてみてください！
satokotadesignキャンペーン実施中！
