使い方
- 1つめの層の横のずれ（px）と縦のずれ（px）を設定します。縦のずれを正の値にすると、影が下に動きます。
- 縁をぼかすにはぼかし（px）を上げ、影を箱より大きくまたは小さくするには広がり（px）を上げます。
- 色と透明度を選びます。より自然な影にするには、層を追加でさらに層を加えます。
- CSSの宣言をコピーして、要素のルールに貼り付けます。
値の組み立て方
box-shadowプロパティは、カンマで区切った1つ以上の影を受け取ります。各影は、省略できる内側の指定、横と縦のずれ、ぼかしの半径、広がりの距離、色の順に書かれます。1つめの影は他の影の上に描かれ、影がない場合の値はnoneです。
ぼかしの半径が負になることはありません。ぼかしが大きいほど、影は広い範囲に柔らかく広がります。広がりは、ぼかしが適用される前に影を大きくまたは小さくします。透明度は、rgba色のアルファ値として、小数点以下2桁までで書かれます。
box-shadow: [inset] offset-x offset-y blur spread color, ...層と、エディタの確認内容
柔らかく自然な影は、2つの層であることが多く、箱に近い小さく濃い層と、外側のより大きく薄い層からなります。それぞれの層は、値の中の1つの影です。エディタは、最大8層、ずれと広がりは-200から200ピクセル、ぼかしは0から200ピクセル、透明度は0から100%まで受け付けます。
プレビューはコードと同じ値を使うので、見えているものがブラウザの描く影です。非常に大きいぼかしや広がりは、古いスマートフォンでは描画が遅くなるので、目的を果たす最小の値を使ってください。
計算例：2層の影をもつカード
1つめの層は、横のずれ0、縦のずれ4ピクセル、ぼかし6、広がり0で、黒を透明度10%にします。2つめは、横のずれ0、縦のずれ10ピクセル、ぼかし20で、透明度15%です。値は0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15) になります。
カードに貼り付けると、カードの下では鋭く、さらに下の方では柔らかい影になります。
よくある質問
内側（inset）は何をしますか？
内側の影は、箱の内側にその縁に沿って描かれ、箱が押し込まれたように見えます。入力欄や押されたボタンの表現に役立ちます。1つの箱に内側の影と外側の影を一緒に付けることもできます。
ずれに正負の符号があるのはなぜですか？
横のずれが正なら影は右へ、負なら左へ動きます。縦のずれが正なら下へ動くので、箱の下に落ちる影は正の値になります。
ぼかしと広がりの違いは何ですか？
ぼかしは影の縁を柔らかくし、より広い範囲で薄くなるようにします。広がりは、ぼかされる前に影そのものを大きく、負の場合は小さくします。ぼかしは0より小さくなりませんが、広がりは負にもできます。
作られるCSSはすべてのブラウザで使えますか？
ベンダープレフィックスなしのbox-shadowプロパティは、カンマで区切った複数の層とrgba色を含め、現在のブラウザがすべて対応しており、何年も前から使えます。宣言はそのまま、プレフィックスなしで使えます。
エディタが何かを保存したり送信したりしますか？
いいえ。影はブラウザの中で描かれ、何も保存もサーバーへの送信もされません。ページを離れる前にCSSをコピーしてください。再読み込みすると、初期設定の影から始まります。
出典
数値と文章の最終確認日：2026年11月10日火曜日。