できない.dev

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

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

公開: 更新:

プレビュー
<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);
}

影は面が浮いていることを示す手がかりで、ぼかし半径を大きく、透明度を低くするほど遠くに浮いて見える。

Y 方向のオフセットとぼかし半径をセットで動かすのは、光源が上にあるという見え方と矛盾させないためである。

つまずき

影が濃すぎると古い印象になる。
調整の基本は次の 3 つである。

  • 影の透明度は 0.1〜0.2 程度に抑える
  • 浮き具合は Y 方向のオフセットとぼかし半径のバランスで決める
  • :hover で影を強めると、持ち上がる動きも作れる
できない例: 濃く小さい影
.card {
  width: 120px;
  margin: 8px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
}
できる例: 薄く広い影
.card {
  width: 120px;
  margin: 8px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
できる例: ホバー時に影を強める（再現）
.card {
  width: 120px;
  margin: 8px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* :hover の状態を固定して表示 */
.card.is-hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

このコードで動いた？