CSS box-shadowとは、要素に影を付けるプロパティで、構文は box-shadow: offset-x offset-y blur spread color inset の6値で指定する。offset-xとoffset-yの2値が必須で、blur・spread・color・insetは任意である。カンマ区切りで複数の影を重ねることも可能で、カードUIやニューモーフィズムなど20以上のデザインパターンに応用できる。
実際にbox-shadowを試したい方は、box-shadowジェネレーターでリアルタイムプレビューしながら値を調整できます。
box-shadowの基本構文
CSSのbox-shadowプロパティは、要素に影（シャドウ）効果を加えるプロパティだ。カードの浮き上がり表現といった単純な使い方から、ネオモーフィズムやグロウといった凝ったデザインまで、UIの奥行きと立体感はほぼこの1プロパティで決まる。
構文の全パラメータ
box-shadowの完全な構文はこうなる。
各パラメータの意味を順番に整理する。
| パラメータ | 意味 | 必須 | 初期値 |
|---|---|---|---|
| offset-x | X方向のずれ。正の値で右、負の値で左へ影が伸びる | 必須 | - |
| offset-y | Y方向のずれ。正の値で下、負の値で上へ影が伸びる | 必須 | - |
| blur-radius | ぼかし半径。大きいほど影がふんわりと広がる。0だとシャープな影 | 任意 | 0 |
| spread-radius | 影の拡大・縮小。正の値で広がり、負の値で縮む | 任意 | 0 |
| color | 影の色。rgba()で透明度も指定できる | 任意 | currentColor |
| inset | キーワード。指定すると内側に影が付く | 任意 | 外側シャドウ |
最小構成から順番に理解する
-
offset-xとoffset-yだけ（最小構成）
2つの値だけでも影は付くが、ぼかしがなくシャープな影になる。意図的なデジタル風表現なら使えるが、通常はblurも一緒に指定する。
-
blurを追加する（標準構成）
blurを加えると自然なふんわりとした影になる。UIカードやボタンでは
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)のように blur を 8〜16px 程度に設定するのが定番だ。 -
spreadを使って影の大きさを制御する
spreadに正の値を指定すると影が要素の周囲に広がり、負の値で縮む。blurだけでは作れない形状のシャドウが、spreadを組み合わせることで実現できる。
-
色はrgba()を使う
rgba(0, 0, 0, 0.15)のように透明度を指定するのが基本だ。不透明な黒や単色の影は浮いて見えることが多い。透明度を持たせることで影が背景に馴染む。
Point
offset-x と offset-y を両方 0 にすることで、全方向均等に広がる影（Ambient Shadow）が作れます。カードUIで最もよく使われるパターンで、box-shadow: 0 2px 8px rgba(0,0,0,0.12) のように書きます。
insetシャドウの使い方
insetキーワードを追加すると、影が要素の外側ではなく内側に付く。押し込まれたような表現や凹んだ溝のようなデザインに使う場面が多く、ネオモーフィズムの凹型ではほぼ必須のキーワードだ。
insetの基本
insetの主な用途
- フォームのinputフィールドに奥行き感を出す（フォーカス時や通常状態の凹み表現）
- ボタンの押下状態（:active）を表現する
- プログレスバーやメーターの内部に深みを持たせる
- ネオモーフィズムデザインで凹んだ要素を作る（後述）
Point
insetシャドウは要素の overflow プロパティの影響を受ける。overflow: hidden が指定されていると inset shadow が見えなくなる——これは見落としやすいので頭に入れておきたい落とし穴だ。
複数シャドウの重ね方
box-shadowはカンマ区切りで複数の影を同時に指定できる。リストの先に書いた影が上（前面）に描画される。複数シャドウを重ねることで、現実の物体のようなリアルな影の表現が生まれる。
複数シャドウの基本構文
2層シャドウで自然な浮き上がりを表現
現実世界の影は1種類ではない。光源に近い鮮明な影と、環境光による拡散した影が重なっている。CSSで2〜3層の影を重ねると、その物理的な現象を再現できる。
外側と内側を組み合わせる
Point
複数シャドウはインラインでも書けるが、各シャドウを改行してコメントを残す習慣をつけるといい。「近い影」「遠い影」と意図を記録しておけば、数週間後の自分もチームメンバーも即座に意図を読み取れる。
コピペで使えるbox-shadowパターン20選
構文を理解したら、実際のデザインパターンへの応用が本番だ。以下の20パターンは現場で広く使われているシャドウ表現を7カテゴリに分類し、コードをそのまま流用できるように用意した。各パターンの横にあるジェネレーターリンクで、値を自由に微調整できる。
ベーシック（ソフトシャドウ・ハードシャドウ・インセット）
1. ソフトシャドウ（定番）
あらゆるカードUIの基本形。blur を大きめにして自然な浮き上がりを表現する。迷ったらまずこれを使う。
2. ハードシャドウ（フラット）
blur を 0 にしたシャープな影。イラスト的でポップな印象を与え、LP やポートフォリオサイトに向いている。
3. インセットシャドウ（凹み）
入力フィールドやプログレスバーに奥行きを出す。insetキーワードで内側に影が付く。
マテリアルデザイン風（Elevation 1-5）
Google Material Design の elevation（浮き高さ）を CSS で再現するパターン。コンポーネントの階層関係を影だけで伝えられる。
4. Elevation 1（ほぼ地面）
5. Elevation 2（カード）
6. Elevation 3（ドロップダウン）
7. Elevation 4（ダイアログ）
8. Elevation 5（モーダル）
Point
Elevation の数値が大きいほどコンポーネントは「画面から離れている」ことを意味する。モーダル > ドロップダウン > カード > ボタン の順でシャドウを強くするのが階層表現の基本だ。ジェネレーターでelevationを再現する
ニューモーフィズム（凸・凹・フラット）
背景色と近い色のシャドウを使い、要素が背景から浮き出ているように見せるスタイル。「光源は左上」が前提で、左上に明るい影・右下に暗い影を配置する。
9. ニューモーフィズム（凸型：浮き上がり）
10. ニューモーフィズム（凹型：押し込み）
11. ニューモーフィズム（フラット型：ボタン押下）
注意
ネオモーフィズムはコントラスト比が低くなりやすく、アクセシビリティ上の問題が指摘されている。WCAG 2.1 のコントラスト比基準（テキスト 4.5:1 以上）をコントラストチェッカーで必ず確認すること。
カード型UI（ホバーで浮き上がるシャドウ）
12. カード標準シャドウ
通常状態の控えめなシャドウ。背景との境界を柔らかく示す。
13. カードホバーシャドウ（浮き上がり）
ホバー時に影を広げて「カードが浮き上がった」演出をする。transform: translateY(-2px)と組み合わせると効果が倍増する。
14. カードボーダー風シャドウ
spread だけを使ってborderのような線を描く。ボックスモデルに影響しないため、レイアウトがズレない。
多重シャドウ（レイヤード）
15. スムースシャドウ（段階的レイヤー）
4層のシャドウを段階的に広げることで、非常になめらかで自然な影を作る。高品質なデザインテンプレートでよく見かけるパターンだ。
16. ディープシャドウ（6層レイヤー）
6層を重ねた贅沢な影。スクリーンショットの掲載や製品画像の浮遊感に最適だ。
カラーシャドウ（ブランドカラーを影に使用）
17. ブルーグロウ
CTAボタンやブランドカラーを強調したい要素に。暗い背景で特に効果が映える。
18. マルチカラーグロウ
グラデーション的な輝きを複数のカラーシャドウで再現する。ゲームやエンタメ系のサイトに。
19. サブトルカラーシャドウ
控えめな有彩色シャドウ。純粋な黒より洗練された印象になり、コーポレートサイトにも使いやすい。
テキストシャドウ風の応用
20. 3Dボタン（立体感のある影）
大きな offset-y と色の濃い下面で、物理的なボタンのような立体感を出す。
ツールで効率化
上記20パターンすべてをbox-shadowジェネレーターで値を微調整してカスタマイズできる。プリセットから選んでスライダーで数値を変えるだけで、プロジェクトに合ったシャドウが完成する。
パフォーマンスへの影響と最適化
box-shadowはブラウザのGPUでレンダリングされるが、使い方を誤るとアニメーション時のパフォーマンスが落ちる。デスクトップでは気にならなくても、モバイルで突然カクつくのはこの影響であることが多い。
パフォーマンスに影響する要因
- blur-radiusが大きいほど処理コストが高い。特に50px以上のblurは要注意
- 多数の要素にbox-shadowを付けるとスクロール時のレペイントが増える
- spread-radiusが大きい場合も再描画コストが上がる
- box-shadowをtransitionでアニメーションさせるとリペイントが毎フレーム発生する
最適化のアプローチ
-
will-changeプロパティを使う
アニメーション対象の要素に
will-change: box-shadowを指定すると、ブラウザが事前にGPUレイヤーを用意する。ただし全要素に指定するとメモリを食いつぶすため、実際にアニメーションする要素だけに限定すること。 -
box-shadowの代わりにfilter: drop-shadowを使う
filter: drop-shadow()はGPU処理されやすく、SVGや透明PNGの輪郭に沿った影を付けられる。ただし spread-radius の指定ができないなど機能が限られるため、形状コントロールが必要な場面では box-shadow が適している。 -
アニメーションはopacityで代替する
ホバー時に box-shadow の値を変えるより、
::after疑似要素に大きなシャドウを仕込んでおき、ホバー時に opacity でフェードインさせる方法が軽い。opacity は GPU 合成のみで処理されるため、毎フレームのリペイントを避けられる。
will-change: transform との組み合わせ
ホバー時に transform: translateY(-2px) と box-shadow の両方をアニメーションさせるケースは非常に多い。この場合、will-change: transform, box-shadow を指定することでブラウザに最適化のヒントを与えられる。ただし、will-change は「アニメーションが発生する直前」に付与し、アニメーション完了後に解除するのが理想的だ。常時指定はメモリの無駄遣いになる。
CSSのアニメーション効果と組み合わせると、より動きのあるデザインに。CSSアニメーション入門ガイドも参考にしてください。
filter: drop-shadow() との違いと使い分け
| 特徴 | box-shadow | filter: drop-shadow() |
|---|---|---|
| 影の形状 | 要素のボックスモデル（矩形）に沿う | 要素の実際の形状（透明部分含む）に沿う |
| spread-radius | 指定可能 | 指定不可 |
| inset | 指定可能 | 指定不可 |
| 複数シャドウ | カンマ区切りで複数指定可能 | filter関数を連結して指定（非推奨） |
| パフォーマンス | リペイント発生 | GPU処理されやすい |
| 最適な用途 | UIカード、ボタン、モーダル | SVGアイコン、透過PNG、複雑な形状 |
Point
Chrome DevTools の Performance パネルで box-shadow 起因のリペイントを確認できる。「Paint flashing」を有効にすると影響を受けている要素が緑でフラッシュするので、スクロールしながら見ると一目瞭然だ。
レスポンシブ対応のシャドウ
モバイルとデスクトップでは画面サイズも要素サイズも大きく異なる。デスクトップで美しいシャドウがモバイルでは大きすぎてボケて見える——そんな問題を防ぐために、レスポンシブなシャドウ設計を押さえておきたい。
clamp() を使ったレスポンシブシャドウ
CSS の clamp() 関数を使うと、ビューポート幅に応じてシャドウのサイズを流動的に変えられる。メディアクエリを書かなくても、モバイルでは控えめ・デスクトップでは大きめのシャドウが実現する。
メディアクエリでの切り替え
clamp() よりも制御しやすいのがメディアクエリによる切り替えだ。ブレイクポイントごとにシャドウの値を明示的に変えられるため、デザイナーとのコミュニケーションもスムーズになる。
CSS変数でシャドウを一元管理する
プロジェクト全体でシャドウの一貫性を保つには、CSS変数でシャドウトークンを定義するのが実務的なベストプラクティスだ。デザインシステムを運用しているプロジェクトでは必須の手法になっている。
活用シーン
CSS変数でシャドウを管理すると、ダークモード切り替え時にも :root の値を上書きするだけで全コンポーネントのシャドウが一括で変わる。メディアクエリとの組み合わせでレスポンシブ対応も1箇所で完結する。
ダークモードでのシャドウ設計
ダークモードで box-shadow を使うとき、黒い背景に黒い影は当然見えない。ここが見落とされやすいポイントで、ライトモードで完璧に仕上げたシャドウがダークモードで消える——という失敗は珍しくない。設計段階で以下の3つのアプローチを知っておくと対処できる。
| アプローチ | 方法 | 向いているケース |
|---|---|---|
| 影を使わずelevationをborderで表現 | 透明度の高いborderで要素の輪郭を示す | シンプルなダークUI |
| 影の色を明るくする | 黒ではなく半透明の白や明るいグレーを使う | グラデーションが複雑な背景 |
| グロウシャドウに切り替え | 有彩色のグロウでelevationを表現する | ブランドカラーが強いデザイン |
Material Design 3 のアプローチ
Google Material Design 3では、ダークモードで影の代わりに「Surface tint」（背景をブランドカラーで微妙に染める）でelevationを表現している。シャドウを完全に排除してコントラスト問題を回避するアプローチで、自前のデザインシステム設計にも参考になる。
box-shadowジェネレーターの使い方
box-shadow の値は、数値を細かく調整しながら目視で確認する作業の連続だ。コードを書いてはリロードして確認して——を繰り返すのは時間の無駄。当サイトのbox-shadowジェネレーターなら、スライダーで値をリアルタイムに動かしながらプレビューできる。
ジェネレーターの使い方（5ステップ）
-
プレビュー要素の設定
背景色や要素のサイズを設定する。実際のデザインに近い色で確認することで、同じシャドウでも背景色によって印象がまったく変わるのを実感できる。
-
offset・blur・spreadをスライダーで調整
各パラメータのスライダーを動かすとリアルタイムでプレビューに反映される。X/Yのオフセット、blur、spreadを順番に調整しながら、各パラメータの効果を確認できる。
-
影の色と透明度を選択
カラーピッカーで影の色を選び、不透明度スライダーで透明度を調整する。rgba()の値がリアルタイムで更新されるので、数値とビジュアルの対応関係を掴みやすい。
-
insetの切り替えと複数シャドウの追加
「内側シャドウ」トグルでinsetの有無を切り替えられる。「シャドウを追加」ボタンで複数のシャドウを重ねれば、多層シャドウも視覚的に確認しながら作れる。
-
CSSコードをコピー
完成したシャドウのCSSコードを「コピー」ボタンでクリップボードに取得し、プロジェクトにそのまま貼り付けるだけ。
ツールで効率化
登録不要・完全無料。ネオモーフィズム・グロウ・フラットシャドウのプリセットから微調整するだけで、この記事で紹介したデザインパターンを即座に再現できる。
その他の活用場面
box-shadowはUIコンポーネントだけに留まらない。知っておくと地味に役立つ使い方を4つ挙げておく。
- テキストの強調:
text-shadowとの組み合わせでタイトルをより印象的に - borderの代替:
box-shadow: 0 0 0 2px #6366f1はborderと同様の見た目で、レイアウトに影響しない（outline的な使い方） - フォーカスリング: アクセシビリティのフォーカス表示を
:focus-visibleと組み合わせてデザインする - 区切り線:
box-shadow: 0 1px 0 rgba(0,0,0,0.1)でborder-bottomの代わりに細い区切り線を作れる