CSS box-shadow完全ガイド — カード、グロー、ニューモーフィズムまで

box-shadow、コピペだけで済ませていませんか？

CSS box-shadowはほとんどの開発者が「ある程度だけ」学ぶプロパティです。デザイン仕様から値をコピーするか、Stack Overflowで見つけて貼り付けて終わり。でも各パラメータが何をするか本当に理解すると、現代的なカードのわずかな立体感から完全なニューモーフィズムUI、光るネオンボタンまで、驚くほど幅広いエフェクトが実現できます。

読みながら実験したい場合は、ToolPalのCSS Box Shadow生成器をご利用ください。リアルタイムでプレビューを確認しながらCSSをすぐにコピーできます。

---

構文の完全解説

box-shadow: offset-x offset-y blur-radius spread-radius color;

各パラメータを正確に見ていきます：

offset-x — シャドウの水平方向の移動。正の値は右、負の値は左。

offset-y — シャドウの垂直方向の移動。正の値は下（上からの光源が標準）、負の値は上。

blur-radius — シャドウのぼかし具合。0だとシャープな境界。値が高いほど柔らかく拡散したシャドウになる。

spread-radius — シャドウのサイズ拡張/縮小。正の値は要素より大きく、負の値は小さく。省略可能（デフォルト0）。

color — シャドウの色。透明度制御のためrgba()またはhsla()の使用を推奨。純粋な黒（#000）は濁って見えることが多い。

基本的なシャドウ：

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

---

insetキーワード

先頭にinsetを追加すると、外側ではなく内側のシャドウが作成されます：

.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

内側シャドウの活用場面：

• テキスト入力欄、textarea（くぼんだ感じ）
• ボタンの押された状態
• ニューモーフィズムの「押された」状態

---

マルチレイヤーシャドウ：リアリティの秘密

box-shadowで最も活用されていない機能は、カンマで複数のシャドウを重ねることです：

.realistic-card {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04);
}

レイヤーを重ねる方法は、実際のシャドウの作られ方に似ています。単一の大きなシャドウだけでは、しばしば平面的または不自然に見えます。

---

実用的なUIエフェクト集

1. カードの立体感（Material Designスタイル）

GoogleのMaterial Designは、UI要素が異なる「高さ」に存在するというコンセプトを普及させました。

/* 通常状態 */
.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.2s ease;
}

/* ホバー状態 */
.card:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

2. 柔らかいシャドウ（現代的ミニマルデザイン）

最近のトレンドは、不透明度を低く抑えブラーを大きくした柔らかいシャドウです：

.soft-card {
  background: white;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

ブランドカラーを取り入れたシャドウ：

.indigo-card {
  background: white;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

3. ダークモード向けグロー効果

グローはオフセットなし、大きなブラー、彩度の高い色を使ったシャドウです：

.glow-button {
  background: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
}

ネオン効果：

.neon-element {
  box-shadow:
    0 0 5px #fff,
    0 0 20px #ff00ff,
    0 0 60px #ff00ff;
}

4. ニューモーフィズム

ニューモーフィズム（Soft UI）は2020年頃に流行したデザイントレンドです。要素の背景色がコンテナと同じで、明るいシャドウと暗いシャドウを同時に使います：

body {
  background: #e0e5ec;
}

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    8px 8px 16px #b8c0cc,
    -8px -8px 16px #ffffff;
}

押された状態：

.neumorphic-button:active {
  box-shadow:
    inset 4px 4px 8px #b8c0cc,
    inset -4px -4px 8px #ffffff;
}

ニューモーフィズムの限界: グレー系の背景でのみ正しく機能します。低コントラストによるアクセシビリティの問題もあります。

5. シャープなシャドウ（レトロ/ボールドデザイン）

ブラーを0にすると、シャープでオフセットされたシャドウが生まれます：

.retro-card {
  background: white;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
}

.retro-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}

6. フォーカスリングの代替

ブラウザのデフォルトアウトラインより洗練されたフォーカス表示として使われます：

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

---

よくある間違い

純粋な黒（#000）をそのまま使う: ほぼ必ずおかしく見えます。rgba(0, 0, 0, 0.1)〜rgba(0, 0, 0, 0.3)の範囲から始めましょう。

ブラーだけ大きく、レイヤーは一つ: 単一の大きなシャドウは滲んだように見えることが多いです。2〜4層重ねましょう。

背景色を考慮しない: ニューモーフィズムは要素の背景色がコンテナと異なると崩れます。

spread-radiusの負の値を知らない: 負のspreadはシャドウを内側に引き込み、特定の方向だけにシャドウを見せることができます：

/* 下側だけにシャドウ */
.bottom-shadow {
  box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);
}

---

パフォーマンスの考慮事項

box-shadowはブラウザのコンポジティングレイヤーの外でレンダリングされます。多くのUIでは問題ありませんが、多数の要素に同時にシャドウをアニメーションさせたり、大きなサーフェスで使用したりすると、カクつきが生じることがあります。

GPUアクセラレーションのためにfilter: drop-shadow()を使用:

/* filterバージョン（GPUコンポジティング可能） */
.card {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
}

filter: drop-shadow()はSVGや透明PNGなど不規則な形状にも機能するという利点があります。ただし、inset、マルチレイヤー、spread-radiusはサポートされません。

---

チートシート

/* 微妙なカードの立体感 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

/* Material Designカード */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* レイヤードリアリスティック */
box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);

/* グロー効果 */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);

/* ニューモーフィズム */
box-shadow: 8px 8px 16px #b8c0cc, -8px -8px 16px #ffffff;

/* レトロシャープシャドウ */
box-shadow: 4px 4px 0 #000;

/* フォーカスリング */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);

/* 下側だけシャドウ */
box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);

/* 内側の押された状態 */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

---

まとめ

box-shadowは5分で基礎を学べますが、何年経っても新しいトリックを発見するプロパティです。重要なポイント：

1. 単一の大きなシャドウではなく複数のレイヤーを重ねる
2. 不透明度の低いrgba()を使う — 純粋な黒は避ける
3. insetで入力欄や押された状態を表現する
4. 負のspreadで方向性のあるシャドウを作る
5. パフォーマンスが重要なアニメーションにはfilter: drop-shadow()を検討する

CSS Box Shadow生成器で実際に実験してみるのが、これらのパターンを身につける最も早い方法です。