影のX/Yオフセット・ぼかし・広がり・色をスライダーで調整し、box-shadowのCSSを生成します。プレビューを見ながら微調整できます。
5つの値の意味
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);
│ │ │ │ └ 色（不透明度を下げるのが基本）
│ │ │ └ 広がり（spread）
│ │ └ ぼかし（blur）
│ └ 縦方向のずれ
└ 横方向のずれ自然に見せるコツ
- 横方向のずれは0、縦方向に少し下げる（光が上から当たっている想定）
- 色は黒の不透明度10〜20%程度に。真っ黒だと重く見えます
- 浮かせたい要素ほど、ぼかしと縦のずれを大きくします
- 複数の影を重ねると、より自然な奥行きが出ます（カンマ区切りで指定）
/* 影を2枚重ねた例 */
box-shadow: 0 1px 2px rgba(0,0,0,0.08),
0 8px 24px rgba(0,0,0,0.12);insetで内側の影に
値の先頭に inset を付けると、要素の内側に影が入ります。入力欄をへこませて見せたいときや、押し込まれたボタンの表現に使えます。
影で階層を表す
手前にあるものほど影を大きく・薄くすると、画面の奥行きが自然に伝わります。値をあらかじめ決めておくと、サイト全体の統一感が出ます。
| 階層 | 影の目安 |
|---|---|
| カード（静止） | 0 1px 3px rgba(0,0,0,0.10) |
| カード（ホバー） | 0 4px 12px rgba(0,0,0,0.12) |
| ドロップダウン | 0 8px 24px rgba(0,0,0,0.15) |
| モーダル | 0 16px 48px rgba(0,0,0,0.20) |
よくある質問
Q spread（広がり）は何をする値ですか？
影のサイズを一律に拡大・縮小します。マイナス値にすると影が小さくなり、輪郭が締まって見えます。
Q 影を複数付けられますか？
できます。カンマ区切りで複数指定すると、重ねて表現できます。
Q 内側に影を付けるには？
値の先頭に inset を付けます。入力欄のへこみ表現などに使えます。
Q パフォーマンスへの影響は？
大きなぼかしを多数の要素に適用すると描画負荷が上がります。アニメーションと組み合わせる場合は特に注意してください。