CSSで影が“ふわっと揺れる”アンビエント・シャドウ表現｜コピペで使える実装コード付き

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

今回ご紹介するのは、影がふわふわ揺れる「アンビエント・シャドウ」エフェクト。
静的な影ではなく、まるで光源がわずかに動いているような“呼吸する影”をCSSだけで再現するテクニックです。

要素を浮かせたいときや、カードデザインに高級感を持たせたいときに抜群の効果を発揮します。
一見すると難しそうに見えますが、実際はわずかなアニメーションを加えるだけで、驚くほど雰囲気が変わる便利な演出です。
コピペで使えるコードとともに、デザイン応用や調整のコツまでまとめてご紹介します。

アンビエント・シャドウとは？

通常の box-shadow は固定された影ですが、アンビエント・シャドウは
「環境光が揺れているように影がわずかに動く」
のが最大の特徴です。

・カードやボタンを“浮いている風”にデザインしたい
・高級感や奥行きを出したい
・サイト全体をやわらかくほぐしたい

というシーンで非常に効果的です。

コピペで使える！揺れるアンビエントシャドウCSS

下記コードをそのまま貼れば動きます。

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

影をぼかして“空気感”を出したい場合はこうします。

@keyframes shadowMoveSoft {
  0% {
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.14);
  }
  50% {
    box-shadow: 0 30px 56px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.14);
  }
}

ぼかし量・透明度を変えるだけで、印象がガラッと変わります。

光源を“横に揺らす”アレンジ

縦だけではなく、光源が横に動いているような影も作れます。

@keyframes shadowSide {
  0% {
    box-shadow: 8px 20px 32px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: -8px 22px 40px rgba(0, 0, 0, 0.26);
  }
  100% {
    box-shadow: 8px 20px 32px rgba(0, 0, 0, 0.2);
  }
}

まるで光が左右に揺れているような立体感が生まれます。

おすすめの使いどころ

動きが強すぎないため、どんなデザインにも馴染みます。

まとめ

アンビエント・シャドウは、単なる影に少しだけ動きを与えるだけで
カードやボタンが“呼吸する”ような、柔らかい立体感を生み出せる便利な演出です。
CSSだけで実装できるため、ぜひプロジェクトに取り入れてみてください。

satokotadesignキャンペーン実施中！