box-shadow / text-shadow の読み方と実用例
box-shadow と text-shadow の引数（offset-x offset-y blur spread color）を視覚的に解説。UI デザインで使われる定番シャドウ 10 パターンを紹介。
公開 · 更新 · yuzlrin
box-shadow の構文
box-shadow: [inset] offset-x offset-y blur spread color;
・offset-x: 右方向プラス、左マイナス（px）
・offset-y: 下プラス、上マイナス
・blur: ぼかし半径（0 で境界くっきり）
・spread: 影の拡大縮小（0 で box と同サイズ）
・color: 任意（rgba で不透明度調整が定番）
・inset: 内側の影（くぼみ表現）
複数指定はカンマ区切り。例: '0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.05)'
定番シャドウ 10 パターン
・Material Elevation 1: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08)
・Material Elevation 4: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)
・Apple soft card: 0 8px 32px rgba(0,0,0,0.08)
・Inner border: inset 0 0 0 1px rgba(0,0,0,0.08)
・Floating button: 0 4px 14px rgba(0,118,255,0.39)
・Neumorphism: inset 5px 5px 10px rgba(0,0,0,0.1), inset -5px -5px 10px rgba(255,255,255,0.8)
・Glow: 0 0 20px rgba(99,102,241,0.5)
・Paper stack: 0 1px 1px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.1)
・Focus ring: 0 0 0 3px rgba(59,130,246,0.5)
・Etched text: 0 1px 0 rgba(0,0,0,0.2), 0 2px 5px rgba(0,0,0,0.15)
パフォーマンス上の注意
box-shadow はペイントコスト（GPU 処理）が高く、スクロール時のジャンクを引き起こしがち。
・複数要素に同時適用は避ける
・hover アニメーションは transform: scale + shadow 補間で GPU 任せに
・大きな blur (> 20px) はレイヤ化しないとモバイルで重い
関連ツール
よくある質問
box-shadow と filter: drop-shadow の違い？
box-shadow は矩形（box）の影を落とします。透過 PNG の実際の形に沿った影が必要なら filter: drop-shadow を使います。SVG やロゴにはこちらが自然。
ダークモードで影が見えづらい
暗色背景では黒 rgba 影は境界が溶けます。ダークモード用に「背景より暗い」か「白くハイライト」を使います。例: 0 4px 12px rgba(255,255,255,0.04)。
SEO に影の有無は関係する？
視覚効果なので直接影響はありません。ただし文字のコントラスト比が影で下がる（text-shadow で読みにくくなる）場合は WCAG 違反になり得ます。