Toolypet
ブログに戻る
CSS

CSS Box Shadow 完全ガイド 2026 - シャドウ効果をマスターする

CSS box-shadowプロパティの全て。基本構文から複数シャドウ、ネオン効果、ニューモーフィズムまで実践例でマスターします。

Toolypet Team

Toolypet Team

Development Team

6 分で読めます

CSS Box Shadow 完全ガイド 2026

ボタンに立体感を、カードに奥行きを、UIに洗練さを与えるbox-shadow。2026年のWebデザインにおいて、シャドウは単なる装飾ではなくUXの核心要素です。

box-shadow 基本構文

box-shadow: offset-x offset-y blur spread color;
値説明必須
offset-x水平オフセット（+ 右方向）✅
offset-y垂直オフセット（+ 下方向）✅
blurぼかし半径❌（デフォルト 0）
spread拡散半径❌（デフォルト 0）
colorシャドウの色❌（デフォルト currentColor）
inset内側シャドウ❌

基本例

シンプルなシャドウ

/* 基本ドロップシャドウ */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* より強いシャドウ */
.card-elevated {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

方向別シャドウ

/* 右下 */
.shadow-br { box-shadow: 4px 4px 8px rgba(0,0,0,0.2); }

/* 左上 */
.shadow-tl { box-shadow: -4px -4px 8px rgba(0,0,0,0.2); }

/* 全方向 */
.shadow-all { box-shadow: 0 0 15px rgba(0,0,0,0.3); }

複数シャドウ

カンマで複数のシャドウを組み合わせることができます。

/* 柔らかい多層シャドウ */
.soft-shadow {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.07),
    0 2px 4px rgba(0,0,0,0.07),
    0 4px 8px rgba(0,0,0,0.07),
    0 8px 16px rgba(0,0,0,0.07);
}

/* リアルなシャドウ */
.realistic {
  box-shadow:
    0 2.8px 2.2px rgba(0,0,0,0.02),
    0 6.7px 5.3px rgba(0,0,0,0.028),
    0 12.5px 10px rgba(0,0,0,0.035),
    0 22.3px 17.9px rgba(0,0,0,0.042),
    0 41.8px 33.4px rgba(0,0,0,0.05),
    0 100px 80px rgba(0,0,0,0.07);
}

inset シャドウ

insetキーワードで内側シャドウを作成します。

/* 基本 inset */
.inset-shadow {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* 押されたボタン効果 */
.pressed-button {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.3),
    inset 0 -1px 2px rgba(255,255,255,0.1);
}

/* 入力フィールドのフォーカス */
.input:focus {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),
              0 0 0 3px rgba(59,130,246,0.3);
}

デザイントレンド別の例

1. マテリアルデザインのシャドウ

/* Elevation 1 */
.md-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

/* Elevation 2 */
.md-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12); }

/* Elevation 3 */
.md-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10); }

/* Elevation 4 */
.md-4 { box-shadow: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05); }

/* Elevation 5 */
.md-5 { box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

2. ニューモーフィズム

/* ニューモーフィズム背景 */
.neumorphism {
  background: #e0e5ec;
  box-shadow:
    9px 9px 16px rgba(163,177,198,0.6),
    -9px -9px 16px rgba(255,255,255,0.5);
}

/* ニューモーフィズム押下状態 */
.neumorphism-pressed {
  background: #e0e5ec;
  box-shadow:
    inset 6px 6px 10px rgba(163,177,198,0.6),
    inset -6px -6px 10px rgba(255,255,255,0.5);
}

/* ニューモーフィズムボタン */
.neumorphism-button {
  background: linear-gradient(145deg, #cacfd6, #f0f5fc);
  box-shadow:
    5px 5px 10px #a3b1c6,
    -5px -5px 10px #ffffff;
}

3. グラスモーフィズム

.glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255,255,255,0.1);
}

4. ネオン効果

/* ネオングロー */
.neon-blue {
  box-shadow:
    0 0 5px #00f,
    0 0 10px #00f,
    0 0 20px #00f,
    0 0 40px #00f;
}

.neon-pink {
  box-shadow:
    0 0 5px #ff00ff,
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 40px #ff00ff;
}

/* アニメーションネオン */
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 5px #0ff, 0 0 20px #0ff; }
  50% { box-shadow: 0 0 10px #0ff, 0 0 40px #0ff, 0 0 60px #0ff; }
}

.neon-animated {
  animation: neon-pulse 2s infinite;
}

カラーシャドウ

ブランドカラーシャドウ

/* 青いシャドウ */
.shadow-blue {
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

/* 紫のシャドウ */
.shadow-purple {
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

/* グラデーション風マルチカラー */
.shadow-gradient {
  box-shadow:
    -10px 0 30px rgba(255, 0, 128, 0.3),
    10px 0 30px rgba(0, 128, 255, 0.3);
}

ホバー効果

.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  transform: translateY(-5px);
}

実践コンポーネント

カードコンポーネント

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.1),
    0 1px 2px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow:
    0 10px 15px -3px rgba(0,0,0,0.1),
    0 4px 6px -2px rgba(0,0,0,0.05);
}

ボタン

.button {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(59,130,246,0.4);
  transition: all 0.2s;
}

.button:hover {
  box-shadow: 0 6px 20px rgba(59,130,246,0.5);
  transform: translateY(-2px);
}

.button:active {
  box-shadow: 0 2px 8px rgba(59,130,246,0.4);
  transform: translateY(0);
}

モーダル/ポップアップ

.modal {
  background: white;
  border-radius: 16px;
  box-shadow:
    0 25px 50px -12px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.05);
}

/* ダークモード */
.modal-dark {
  background: #1f2937;
  box-shadow:
    0 25px 50px -12px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.1);
}

入力フィールド

.input {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.2s;
}

.input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
}

パフォーマンス最適化

will-change の使用

.animated-shadow {
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
}

/* アニメーション後に削除 */
.animated-shadow:not(:hover) {
  will-change: auto;
}

代替手段：filter drop-shadow

/* 不規則な形状へのシャドウ */
.drop-shadow {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* PNG画像に適用 */
.icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

box-shadow vs filter

特性box-shadowdrop-shadow
適用対象ボックス境界アルファチャンネル
spread サポート✅❌
inset サポート✅❌
複数シャドウ✅❌
パフォーマンス良好普通

Tailwind CSS

<!-- 基本シャドウ -->
<div class="shadow-sm">小さいシャドウ</div>
<div class="shadow">基本シャドウ</div>
<div class="shadow-md">中シャドウ</div>
<div class="shadow-lg">大シャドウ</div>
<div class="shadow-xl">特大シャドウ</div>
<div class="shadow-2xl">最大シャドウ</div>

<!-- カラーシャドウ -->
<div class="shadow-lg shadow-blue-500/50">青いシャドウ</div>

<!-- ホバー -->
<div class="shadow hover:shadow-xl transition-shadow">ホバー効果</div>

<!-- inset -->
<div class="shadow-inner">内側シャドウ</div>

FAQ

Q1: シャドウが切れる問題

A: 親要素にoverflow: hiddenがあるか、シャドウが広がるスペースがありません。

/* 解決策 */
.parent {
  overflow: visible; /* または削除 */
  padding: 20px; /* シャドウ用のスペース確保 */
}

Q2: パフォーマンスの問題はありますか？

A: 多くの要素に複雑なbox-shadowを適用するとパフォーマンスが低下する可能性があります。

  • 複数シャドウを最小限に
  • will-changeを適切に使用
  • スクロール時はシャドウを簡素化

Q3: 角丸でシャドウがおかしい

A: box-shadowは自動的にborder-radiusに従います。問題がある場合はブラウザ互換性を確認してください。

Q4: シャドウの色のおすすめは？

A:

  • ライトモード: rgba(0,0,0,0.1) ～ rgba(0,0,0,0.2)
  • ダークモード: rgba(0,0,0,0.3) ～ rgba(0,0,0,0.5)
  • カラーシャドウ: 背景色の30-50%の不透明度

まとめ

box-shadowの要点：

  1. 基本構文: offset-x, offset-y, blur, spread, color
  2. 複数シャドウ: カンマでレイヤリング
  3. inset: 内側シャドウ
  4. トレンド: ニューモーフィズム、グラスモーフィズム、ネオン
  5. パフォーマンス: will-change、過度なシャドウを避ける

関連ツール

ツール用途
Box Shadow ジェネレータシャドウコード生成
グラデーションジェネレータCSSグラデーション
フィルタージェネレータCSSフィルター効果
CSSbox-shadowシャドウUIデザインWeb開発エフェクト

著者について

Toolypet Team

Toolypet Team

Development Team

The Toolypet Team creates free, privacy-focused web tools for developers and designers. All tools run entirely in your browser with no data sent to servers.

Web DevelopmentCSS ToolsDeveloper ToolsSEOSecurity
すべての投稿に戻る