ボックスシャドウプロパティ

最終更新：2026-09-13

box-shadow ボックスシャドウプロパティ

box-shadow プロパティは、要素のボックス（border box）の周囲または内部に 1 つ以上の影のレイヤーを追加し、ページ上で要素に奥行きと階層感を与えます。これはフローティングカードや押し込まれたボタンなどのモダンな UI エフェクトの中核となるプロパティであり、オフセット、ブラー半径（ぼかし）、スプレッド半径（拡散）、および色をサポートします。

カテゴリ
初期値	none
継承	いいえ
適用対象	all
アニメーションタイプ	shadow
CSS バージョン	CSS3
状態	標準

📝 構文

box-shadow: none | <shadow>#;
/* <shadow> = inset? && <length>{2,4} && <color>? */

⚙️ 値

値	タイプ	説明
`none`	キーワード	ボックスシャドウなし
`<shadow>#`	タイプ	シャドウのリスト: inset? 水平垂直ブラースプレッドカラー

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
box-shadow	✓ v10	✓ v12	✓ v3.5	✓ v5.1	✓ v10.5
すべての主要ブラウザーでサポート

ヒント： 最初の 2 つの長さの値（水平方向と垂直方向のオフセット）は必須です。ブラー半径とスプレッド半径の初期値は 0 で、色の初期値は要素の現在の文字色です。

ヒント： inset キーワードを指定すると、影が要素の内部に描画されます。これは押し込まれた状態やくぼんだ状態によく使われます。

❓ よくある質問

QCSS において box-shadow と text-shadow の違いは何ですか？

Abox-shadow はボックスモデル全体に適用されます。影は要素のボックス（border box）の輪郭（border-radius を含む）に沿って描かれ、矩形または角丸の矩形のドロップシャドウが生成されます。一方 text-shadow はテキスト自体にのみ適用され、文字の形に沿って影を落とします。両者の構文は似ており（オフセット、ブラー、色）、しかし影響を受ける対象と重ね合わせ方は完全に異なります。

Q1 つの要素に複数の box-shadow レイヤーを記述するにはどうすればよいですか？

A複数の影のセットはカンマで区切ります。最初のセットが最上層に描画されます。例えば box-shadow: 0 2px 4px #000, 0 8px 16px #333; は、最初のレイヤーを描画した後、その上に 2 番目のレイヤーを重ねます。複数の影は、実際の影の減衰をシミュレートしたり、発光とアウトラインのエフェクトを組み合わせたりするのによく使われます。レイヤーが多いほど、実際の光の当たり方に近づきます。

Qbox-shadow をアニメーションさせることはできますか？また、box-shadow のアニメーションがカクつくのはなぜですか？

Abox-shadow はトランジションとアニメーションをサポートしていますが、アニメーションさせると再描画（repaint）が発生し、ローエンドのデバイスではカクつくことがあります。最適化するには：要素全体を動かすのではなく、hover 時に影の値だけを切り替える、影を持たせた疑似要素を使い transition: opacity でフェードさせる、あるいは重要な場面では filter: drop-shadow() を使う、といった方法があります。必ず対象デバイスでテストしてください。

Qくぼみや押し込みのエフェクトのために、inset の box-shadow を作成するにはどうすればよいですか？

Aシャドウ値の最初に inset キーワードを置くと、影が要素の内部に投射されます。例えば box-shadow: inset 0 2px 8px rgba(0,0,0,0.3) のようにします。inset の影は、押し込まれたボタンやくぼんだ入力フィールドによく使われます。複数の inset 影はカンマで区切って組み合わせられ、立体的なへこみの見た目を作れます。