Widely available YES。全ブラウザで長期サポート済み。UI に奥行きを加える標準的な手法。
レイアウト Widely available

box-shadow

box-shadow は要素に影を追加し、UI に奥行きや立体感を与える。オフセット、ぼかし、広がり、色を制御でき、複数の影をカンマ区切りで重ねることも可能。inset キーワードで内側の影も作成できる。Material Design のエレベーションなど、モダンな UI フレームワークの基盤となっている。

装飾エフェクト

概要

box-shadow は要素に影を追加し、UI に奥行きや立体感を与える。オフセット、ぼかし、広がり、色を制御でき、複数の影をカンマ区切りで重ねることも可能。inset キーワードで内側の影も作成できる。Material Design のエレベーションなど、モダンな UI フレームワークの基盤となっている。

対応ブラウザ

デスクトップ

Chrome 10+
Edge 12+
Safari 5.1+
Firefox 4+

モバイル

Chrome Android 18+
Safari iOS 5+
Firefox Android 4+

基本構文

CSS 
/* 基本的なドロップシャドウ */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* エレベーション（複数シャドウ） */
.elevated {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

/* インセットシャドウ */
.inset-input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

実務での使いどころ

  • カードのエレベーション

    複数のシャドウを重ねてマテリアルデザイン風の奥行き表現を実現。ホバー時にシャドウを強めてインタラクションを表現する。

  • フォーカスリングの強調

    box-shadow で独自のフォーカスリングを作成し、outline を補完するアクセシブルなフォーカス表示を実現する。

注意点

  • 大量の box-shadow や大きなぼかし半径はレンダリングパフォーマンスに影響する場合がある。
  • box-shadow は要素のレイアウトサイズには影響しない（影の領域は他の要素と重なる）。

アクセシビリティ

  • フォーカスリングを box-shadow のみで実装する場合、Windows のハイコントラストモードでは表示されない。outline との併用を推奨する。

参考リンク