🔲box-shadow ジェネレーター
スライダーを動かすだけで CSS の box-shadow を作れます。下だけの影、内側の影、複数の影の重ね方も、プレビューを見ながら調整できます。
box-shadow の値の意味
| 値 | 意味 |
|---|---|
| 横のずれ（offset-x） | プラスで右、マイナスで左 |
| 縦のずれ（offset-y） | プラスで下、マイナスで上 |
| ぼかし（blur） | 大きいほどふんわり |
| 広がり（spread） | 影の大きさを広げる・縮める |
| inset | 内側の影にする |
Tailwind CSS なら shadow-sm、shadow-md、shadow-lg などのクラスで似た影を付けられます。
よくある質問
- Q. box-shadowの書き方は？
- box-shadow: 横のずれ 縦のずれ ぼかし 広がり 色; の順に書きます。例：box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1);
- Q. 下だけに影を付けるには？
- 縦のずれをプラスにし、広がり（spread）をマイナスにすると、横に影がはみ出さず下だけに出ます。このツールの「下だけ」で試せます。
- Q. 内側に影を付けるには？
- 先頭に inset を付けます。へこんだボタンや入力欄の表現に使います。
- Q. 自然な影にするコツは？
- 黒の濃さを 0.05〜0.15 程度に抑え、小さくて濃い影と大きくて薄い影を重ねると、自然に浮いて見えます。