CSSでカードコンポーネントに立体感を出したい、ボタンにホバー時のシャドウエフェクトを付けたい、という場面は多いはずです。“box-shadow” はそのすべてを1プロパティで解決できます。

ところが「値が4つも5つもある」「insetって何だ」「複数シャドウの順番が分からない」という疑問を持つ方も少なくありません。この記事では MDN Web Docs の仕様をベースに、各値の意味と実践的なデザイン実例をコードとともに解説します。

コードを書かずに視覚的に試したい場合は、ボックスシャドウ ジェネレーターを使うと、スライダー操作でリアルタイムにプレビューしながら CSS コードを生成できます。アカウント不要・無料で利用できます。

目次

• box-shadowの基本構文
• 各値の役割
  • offset-x / offset-y（必須）
  • blur-radius（ぼかし半径）
  • spread-radius（拡散半径）
  • color（色）
• inset：内側の影
• 複数シャドウの重ねがけ
• 実践デザインパターン
  • パターン1：カードのリフト（ホバーアニメーション）
  • パターン2：ボタンのプレス感
  • パターン3：集中線・グロー効果
  • パターン4：テキスト入力フォーカスリング
• ジェネレーターで視覚的に試す
• まとめ

box-shadowの基本構文

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

MDN Web Docs（box-shadow - CSS: カスケーディングスタイルシート | MDN）によると、構文上で必須なのは “offset-x” と “offset-y” の2値のみです。残りは省略可能です。

/* 最小構成：右10px・下5px */
.card {
  box-shadow: 10px 5px;
}

/* 全値指定 */
.card {
  box-shadow: 10px 5px 15px 2px rgba(0, 0, 0, 0.2);
}

各値の役割

offset-x / offset-y（必須）

影の水平・垂直方向のずれを指定します。

値	方向
”offset-x” 正	右
”offset-x” 負	左
”offset-y” 正	下
”offset-y” 負	上

/* 右下に影 */
.shadow-right-bottom {
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15);
}

/* 左上に影（光源が右下にある表現） */
.shadow-left-top {
  box-shadow: -8px -8px 0 rgba(0, 0, 0, 0.15);
}

blur-radius（ぼかし半径）

3番目の値で、影のぼかし具合を制御します。負の値は指定できません。“0” を指定するとくっきりとした影になります。

/* くっきりした影 */
.sharp {
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

/* 柔らかいぼかし */
.soft {
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
}

spread-radius（拡散半径）

4番目の値で、影のサイズを基準の要素から拡大・縮小します。

• 正の値：影が要素より大きくなる
• 負の値：影が要素より小さくなる

/* 全方向に均等な影（spread活用） */
.glow {
  box-shadow: 0 0 0 8px rgba(100, 100, 255, 0.3);
}

“offset” をゼロにして “spread-radius” だけ大きくすると、全方向に均等な「光彩効果」を作れます。

color（色）

位置は前後どちらでも指定できます。省略すると親要素の “color” プロパティの値を引き継ぎます。“rgba()”・“hsl()“・CSS変数など現代的な色指定はすべて使えます。

/* ブランドカラーでグロー */
.brand-glow {
  box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.5);
}

inset：内側の影

“inset” キーワードを先頭に付けると、影が要素の外側ではなく内側に描画されます。押し込まれたような立体感、テクスチャ、内側の縁取りに使えます。

/* 内側の影で凹み表現 */
.inset-box {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* フォームフィールドのフォーカスリング内側 */
input:focus {
  box-shadow: inset 0 0 0 2px #6366f1;
  outline: none;
}

複数シャドウの重ねがけ

カンマ区切りで複数の影を同時に指定できます。リストの先頭の影が最前面に表示されます。外側・内側の影を組み合わせることで、リッチな立体表現が可能です。

/* カードのリアルな影：近距離の濃い影 + 遠距離の広い影 */
.card-realistic {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.05);
}

デザイナーの間では「近い距離の濃い影」と「遠い距離の薄い影」を重ねるのが、リアルな影表現の定石です。

実践デザインパターン

パターン1：カードのリフト（ホバーアニメーション）

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

“box-shadow” は CSS トランジションの補間対象なので、“transition” と組み合わせると滑らかなリフトアニメーションになります。

パターン2：ボタンのプレス感

.button {
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(0);
  transition: all 0.1s ease;
}

.button:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(3px);
}

外側の影と “transform: translateY” を組み合わせると「実際に押し込まれる」ボタン表現になります。

パターン3：集中線・グロー効果

.glow-card {
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.3),
    0 0 20px rgba(99, 102, 241, 0.2),
    0 0 60px rgba(99, 102, 241, 0.1);
}

“offset” ゼロ・“blur-radius” を大きくとると、光を放つような「グロー」表現になります。

パターン4：テキスト入力フォーカスリング

.input {
  border: 1px solid #e2e8f0;
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}

.input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

外側のフォーカスリング（“spread-radius” 活用）と内側の微細な影を組み合わせると、洗練されたフォーカス状態になります。

ジェネレーターで視覚的に試す

上記の値を手で調整するのは試行錯誤が必要です。ボックスシャドウ ジェネレーターでは:

• offset-x / offset-y / blur-radius / spread-radius をスライダーで直感的に操作
• inset のオン/オフをトグルで切り替え
• 影の色と透明度をカラーピッカーで指定
• 複数シャドウの追加・削除
• 生成された CSS コードをワンクリックでコピー

パラメータを変えながらプレビューを確認し、気に入ったコードをコピーして使えます。

まとめ

値	役割	省略時
”offset-x”	水平オフセット（必須）	—
“offset-y”	垂直オフセット（必須）	—
“blur-radius”	ぼかし半径（負の値不可）	“0"
"spread-radius”	影の拡大縮小	”0"
"color”	影の色	親の “color"
"inset”	内側の影に切り替え	外側

“box-shadow” はシンプルな構文ながら、値の組み合わせ次第で多彩な表現が可能です。複数シャドウの重ねがけとトランジションを組み合わせると、コード数行でプロフェッショナルなUIアニメーションが実現できます。

値の調整は ボックスシャドウ ジェネレーター で視覚的に試してみてください。

---

参考文献

• box-shadow - CSS: カスケーディングスタイルシート | MDN