CSSのbox-shadowは、実際に使おうとするまでシンプルに見えるプロパティです。オフセット？ぼかし？スプレッド？インセット？手で試行錯誤しながら正しく設定するのは手間がかかります。ボックスシャドウジェネレーターを使えば、構文の問題を取り除き、デザインに集中できます。

ボックスシャドウジェネレーターを試す →

box-shadowの構文

box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>;
値説明
insetオプション。シャドウが要素の内側に描画される。
offset-x水平オフセット。正の値で右、負の値で左に移動。
offset-y垂直オフセット。正の値で下、負の値で上に移動。
blur-radiusオプション（デフォルト0）。値が大きいほどシャドウが柔らかくなる。
spread-radiusオプション（デフォルト0）。正の値で拡大、負の値で縮小。
color任意のCSS色値。透明度にはrgba()を使用。

よく使われるパターン

繊細なカードシャドウ

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

2層のアプローチで自然な奥行きを作ります：ベースにタイトなシャドウ、その上にワイドなアンビエントシャドウ。これはマテリアルデザインの高さシステムの背後にあるパターンです。

インセットシャドウ（内側の光彩）

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

テキスト入力、押されたボタン状態、または凹んで見せたい要素に有用です。

ぼかしなし（ハードシャドウ）

box-shadow: 4px 4px 0 #000;

ぼかしをゼロにすると、シャープなオフセットシャドウが生まれます——ネオブルータリストUIデザインで人気です。カラーは暗くなくても構いません。#facc15（黄色）のアクセントシャドウも試してみてください。

グロー効果

box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.5);

両オフセットをゼロに、ぼかしとスプレッドを非ゼロに：シャドウが対称的に放射されます。ホバー状態にブランドカラーと組み合わせて使用してください。

複数のシャドウを重ねる

カンマで区切ることでシャドウを積み重ねることができます：

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07),
  0 8px 16px rgba(0, 0, 0, 0.07);

各レイヤーでオフセットと半径が2倍になります。結果として、単一の荒いエッジのないなめらかでリアルなシャドウが得られます。

パフォーマンスに関する注意

box-shadowはペイントをトリガーしますがレイアウトはトリガーしません。transformやwill-change: transformがある要素に適用した場合、ほとんどのブラウザでハードウェアアクセラレーションが有効になります。低電力デバイスでのbox-shadowアニメーションは避けてください——代わりに疑似要素のopacityをアニメーションさせてください：

.card::after {
  content: '';
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::after {
  opacity: 1;
}

ブラウザサポート

box-shadowはすべてのモダンブラウザで完全にサポートされています。プレフィックスは不要です。insetキーワードと複数のシャドウも完全にサポートされています。

なぜジェネレーターを使うのか

4つの数値とカラーを手動で調整するのは時間がかかります。ビジュアルジェネレーターを使えば：

  • オフセットをドラッグしてシャドウをリアルタイムで更新
  • スライダーでぼかしとスプレッドを調整
  • インセットモードをトグル
  • CSSをそのままプロジェクトにコピー

ボックスシャドウジェネレーターを開く →

クイックリファレンス

効果CSS
ドロップシャドウbox-shadow: 0 4px 6px rgba(0,0,0,0.1)
インセットbox-shadow: inset 0 2px 4px rgba(0,0,0,0.15)
グローbox-shadow: 0 0 8px 2px rgba(99,102,241,0.4)
ハードシャドウbox-shadow: 3px 3px 0 #000
シャドウなしbox-shadow: none

関連ツール