CSSで要素をふんわり浮かせるには

box-shadow でカードをふんわり浮かせる基本形を示す。
ぼかし半径と透明度で浮き具合を調整する。

実行確認済み

実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。

公開: 2026-07-16

プレビュー

<div class="card">ふんわり浮いたカード</div>

.card {
  width: 180px;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

ぼかし半径を大きく・透明度を低くするほど「ふんわり」浮いて見える。

つまずき

影が濃すぎると古い印象になる。
透明度は 0.1〜0.2 程度に抑え、Y 方向のオフセットとぼかし半径のバランスで調整するのが基本。
ホバー時に影を強めると「持ち上がる」動きも作れる。