box-shadow パターンを理解すると「立体感・奥行き・質感」が一気にプロレベルになる
box-shadow は、ただの影ではありません。
UI の雰囲気・奥行き・軽さ・重さ・浮遊感をコントロールするための、非常に強力なデザインツールです。
初心者がつまずきやすい「影の構造」「ぼかしの意味」「広がりの意味」まで丁寧に解説し、
CSS と Tailwind CSS の両方で実践的なパターンを紹介します。
box-shadow の基本構造
影は 4 つの値で構成される
box-shadow: X方向 Y方向 ぼかし 広がり 色;
例：
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
意味はこうです。
- X方向：左右のズレ
- Y方向：上下のズレ（影の落ちる方向）
- ぼかし（blur）：影の柔らかさ
- 広がり（spread）：影の大きさ
- 色：影の濃さ・透明度
深掘り：影の「ぼかし」と「広がり」の違い
- ぼかし（blur）
→ 影の輪郭をどれだけ柔らかくするか - 広がり（spread）
→ 影のサイズそのものを大きくする
初心者はこの2つを混同しがちですが、
影の質感を決める最重要ポイントです。
Tailwind CSS の box-shadow
Tailwind ではプリセットの影を使います。
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none
また、任意値も使えます。
shadow-[0_4px_12px_rgba(0,0,0,0.15)]
パターン1：カードの標準シャドウ（最もよく使う）
CSS版
.card {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
Tailwind版
<div class="shadow-md bg-white p-5 rounded-lg">
カード内容
</div>
特徴
- 柔らかい
- 浮きすぎない
- UI 全般で使いやすい
パターン2：ふわっと浮くシャドウ（モダンUI）
CSS版
.card {
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
Tailwind版
<div class="shadow-xl bg-white p-6 rounded-xl">
浮遊感のあるカード
</div>
特徴
- 影が大きく、ぼかしも強い
- “浮いている”印象
- モダンな SaaS デザインでよく使う
パターン3：小さく控えめなシャドウ（ボタン・タグ向け）
CSS版
.btn {
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
Tailwind版
<button class="shadow-sm px-4 py-2 bg-blue-600 text-white rounded">
ボタン
</button>
特徴
- 小さくて控えめ
- ボタンや小要素に最適
パターン4：内側の影（inner shadow）
CSS版
.box {
box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}
Tailwind版
<div class="shadow-inner bg-gray-100 p-4">
内側に影が入る
</div>
特徴
- くぼんだような見た目
- 入力欄・押し込みボタンなどに使う
パターン5：境界線の代わりに影を使う（フラットUI）
CSS版
.box {
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
Tailwind版
<div class="shadow-[0_0_0_1px_rgba(0,0,0,0.1)] p-4">
境界線の代わりに影
</div>
特徴
- border より柔らかい
- フラットデザインでよく使う
パターン6：2段階シャドウ（立体感を出す）
CSS版
.card {
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.08);
}
Tailwind版（任意値）
<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.08)] p-6 bg-white rounded-xl">
2段階シャドウ
</div>
特徴
- 影を重ねて自然な奥行きを作る
- Apple / Google の UI でよく見る
パターン7：ホバー時に影を強くする（インタラクション）
CSS版
.card {
transition: box-shadow .2s ease;
}
.card:hover {
box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
Tailwind版
<div class="shadow-md hover:shadow-xl transition-shadow bg-white p-5 rounded-lg">
ホバーで浮くカード
</div>
特徴
- ホバーで浮き上がる
- インタラクションが自然で気持ちいい
box-shadow の深掘りポイント
1. 影の色は「黒」ではなく「透明度のある黒」が基本
rgba(0,0,0,0.1)
rgba(0,0,0,0.15)
rgba(0,0,0,0.2)
濃すぎる影は UI を重くします。
2. 影は「ぼかし」が大きいほど柔らかく見える
ぼかし（blur）が小さい
→ カチッとした影（古いデザイン）
ぼかしが大きい
→ 柔らかくモダンな影（今っぽい）
3. 影の方向は Y方向で決まる
0 4px 12px → 下に落ちる影
0 -4px 12px → 上に落ちる影（特殊）
4. spread は「影の大きさ」を変える
0 4px 12px 4px rgba(0,0,0,0.1)
spread を使うと影が広がり、
“ふわっとした”印象が強くなります。
5. 影は「背景色」との相性が重要
白背景 → 影が映える
濃い背景 → 影が見えにくい
背景色に応じて影の濃さを調整すると、
UI が自然になります。
まとめ
box-shadow は UI の質感を決める重要なプロパティです。
- 影は「X / Y / ぼかし / 広がり / 色」で構成
- Tailwind は shadow-* で簡単に指定
- 小さな影 → ボタン
- 中くらいの影 → カード
- 大きな影 → 浮遊感
- inner shadow → くぼみ
- 2段階シャドウ → 高級感
- ホバーで影を変えるとインタラクションが自然
