CSSで要素をふんわり浮かせるには
box-shadow でカードをふんわり浮かせる基本形。
ぼかし半径と透明度で浮き具合を調整する。
公開:
<style>
.card {
width: 180px;
padding: 20px;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
</style>
<div class="card">ふんわり浮いたカード</div>ぼかし半径を大きく・透明度を低くするほど「ふんわり」浮いて見える。
つまずき
影が濃すぎると古い印象になる。
透明度は 0.1〜0.2 程度に抑え、Y 方向のオフセットとぼかし半径のバランスで調整するのが基本。
ホバー時に影を強めると「持ち上がる」動きも作れる。