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
複数シャドウはインラインでも書けるが、各シャドウを改行してコメントを残す習慣をつけるといい。「近い影」「遠い影」と意図を記録しておけば、数週間後の自分もチームメンバーも即座に意図を読み取れる。
おしゃれなデザインパターン5選
構文を理解したら、実際のデザインパターンへの応用が本番だ。以下の5つはWebデザインの現場で広く使われているシャドウ表現で、コードをそのまま流用できるように用意した。
パターン1: ネオモーフィズム（Neumorphism）
2020年頃に流行したスタイルで、要素が背景から浮き上がって見える立体的なデザイン。「光源は左上」という仮定のもと、左上に明るい影、右下に暗い影を組み合わせる。背景色と近い色のシャドウを使うのがポイント——これが外れると途端に破綻する。
注意
ネオモーフィズムはコントラスト比が低くなりやすく、アクセシビリティ上の問題が指摘されている。デザインとして使う場合、WCAG 2.1 のコントラスト比基準（テキスト 4.5:1 以上）を必ず満たしているか確認すること。
パターン2: フラットシャドウ（Flat Shadow）
blurをゼロにして、斜め方向に影をオフセットさせるデザイン。イラスト的でポップな印象を与え、ランディングページやポートフォリオサイトでよく見られる。ホバー時に影が縮む動きと組み合わせると、ボタンが実際に押し込まれているような手触りが出る。
パターン3: リアルシャドウ（多層シャドウ）
Google の Material Design でも採用されている、複数のシャドウを重ねてリアルな物理的な影を再現するパターン。elevation（浮き高さ）によってシャドウの強度を段階的に変えていく設計で、モーダルが一番上に浮いているという視覚的ヒエラルキーを影だけで伝えられる。
パターン4: グロウ効果（Glow Shadow）
offset-xとoffset-yを0にして、有彩色のシャドウを大きなblurで広げることで発光しているような輝きを表現する。CTAボタンやブランドカラーを強調したい要素に最適で、暗い背景との組み合わせで効果が最大化する。
活用シーン
グロウ効果は暗い背景（#0f172aなど）との組み合わせで最も映えます。明るい背景では効果が薄れるため、カードやヒーローセクションの背景色を落としてから適用すると効果的です。
パターン5: 立体感（3D感）のある影
大きな offset-y と小さな blur を組み合わせることで、物体が実際に宙に浮いているような立体感を出す。ランディングページのスクリーンショット紹介やUIモックアップの掲載でよく見かける、あの「製品画像が浮いてる」表現がこれだ。
パフォーマンスへの影響と最適化
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 合成のみで処理されるため、毎フレームのリペイントを避けられる。
Point
Chrome DevTools の Performance パネルで box-shadow 起因のリペイントを確認できる。「Paint flashing」を有効にすると影響を受けている要素が緑でフラッシュするので、スクロールしながら見ると一目瞭然だ。
ダークモードでのシャドウ設計
ダークモードで 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の代わりに細い区切り線を作れる