box-shadowジェネレーター
box-shadowはCSSで要素に影を付けるプロパティです。オフセット（X/Y）・ぼかし・広がり・色・不透明度をスライダーで動かすと、影のプレビューと box-shadow の値がその場で更新されます。insetで内側の影（へこみ表現）にも対応。カード・ボタン・入力欄の立体感づけに使え、処理はすべてブラウザ内で完結します。
スライダーで影を作る手順
スライダーでオフセット（X/Y）・ぼかし・広がり・色を調整するか、例チップを選びます。プレビューと box-shadow 文字列が同時に更新されます。inset をオンにすると影が要素の内側に落ち、へこんだ見た目になります。生成した値は「コピー」でそのまま CSS に貼り付けられます。
各パラメータの意味
- X（水平オフセット）：正で右、負で左に影がずれます。真下に落とすなら 0 のままにします。
- Y（垂直オフセット）：正で下、負で上に影がずれます。自然な影は Y を少しプラスにします。
- blur（ぼかし）：大きいほど影の輪郭がやわらかくなります。0 で輪郭のくっきりした影になります。
- spread（広がり）：正で影を要素より大きく、負で小さく引き締めます。浮き具合の微調整に使います。
- 色・不透明度：影の色と濃さです。黒の 10〜20% 程度にすると多くの背景に馴染みます。
- inset：オンで影が内側に入り、へこんだ表現になります（入力欄・トグルなど）。
具体例
- 控えめなカード →
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15); - 強い浮き →
box-shadow: 0px 10px 30px -4px rgba(0,0,0,0.25); - 内側（inset） →
box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.20); - ブランド色 →
box-shadow: 0px 6px 16px 0px rgba(234,99,121,0.35);
こんな場面で便利です
- カードやパネルを背景から少し浮かせて、情報のまとまりを際立たせたいとき。
- ボタンのホバー時に影を強め、押せることを直感的に伝えたいとき。
- モーダルやポップオーバーを前面に見せ、奥行きの階層をつくりたいとき。
- 入力欄やトグルに inset の影を付け、へこんだ操作対象を表現したいとき。
- ブランドカラーの淡い影でアクセントを添えたいとき。
出力される値の読み方
並び順は inset X Y blur spread rgba(...) で、長さの単位は常に px、不透明度は小数第2位まで書き出します。「コピー」はプロパティ名と末尾のセミコロンまで含めてコピーするので、CSSにそのまま貼れます。
CSSの仕様では blur と spread は省略できるため、0px 4px 12px 0px は 0 4px 12px と書いても同じ意味です。読みやすさを優先するなら、貼り付けたあとに余分な 0px を削っても構いません。逆にblurに負の値は指定できないので、スライダーの下限が0になっています（spreadは負の値が有効です）。
| 項目 | このツールの範囲 | よく使う値 |
|---|---|---|
| X（水平） | -50〜50px | 0（真下に落とすのが基本） |
| Y（垂直） | -50〜50px | 1〜4px（接地感）／8〜24px（浮遊感） |
| blur | 0〜80px | Yの2〜3倍が目安。0だと輪郭の硬い影になる |
| spread | -30〜30px | 0から始める。負の値で影を引き締める |
| 不透明度 | 0〜100% | 黒なら8〜20%。それ以上は影が主役になりすぎる |
影を2枚重ねて自然な奥行きを出す
現実の影は、輪郭のはっきりした近い影と、広くぼやけた遠い影が重なってできています。1枚の影だけで浮遊感を出そうとすると、blurを上げるほど輪郭が消えて「ぼんやり汚れている」ように見えがちです。CSSはカンマ区切りで影を重ねられるので、このツールで作った値を2つ並べると質感が一段よくなります。
box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);
前者が接地の影、後者が浮き上がりの影です。重ねるときは合計の不透明度が上がりすぎないよう、それぞれを単体で使うときより薄めに設定します。並べる順番は手前（近い影）を先に書くのが一般的ですが、重なり具合が変わるだけで両方とも有効です。
| 階層 | 値の目安 | 用途 |
|---|---|---|
| ほぼ平面 | 0 1px 2px rgba(0,0,0,0.08) | 一覧の行、区切りの代わり |
| 少し浮く | 0 4px 12px rgba(0,0,0,0.15) | カード、パネル（既定値もこの近辺） |
| 操作可能に見せる | 0 6px 16px rgba(0,0,0,0.2) | ボタンのホバー、ドラッグ中 |
| 最前面 | 0 20px 48px rgba(0,0,0,0.25) | モーダル、ポップオーバー |
つまずきやすいポイント
- 背景が透明な要素では、影が要素の下から透けて見えません。外側の影は要素の枠の内側には描かれない仕様のためです。内側に落としたい場合は inset を使ってください。
- 影は角丸に追従します。
border-radiusを設定していれば、その形に沿って影が出ます。プレビューの箱は角丸12pxで表示しています。 - 親要素に
overflow: hiddenがあると影が切られます。カード内の要素に影が出ないときは、まず親のはみ出し設定を確認してください。 - レイアウトには影響しません。影は要素の占める大きさを変えないので、隣の要素を押しのけることはありません。その代わり、画面端の要素では影が見切れることがあります。
- 大きなblurは描画コストが高くなります。ホバーで影を変える場合、影そのものをアニメーションさせるより、影を持つ擬似要素の
opacityを変化させるほうが滑らかになります。 - 影だけで境界を示さないほうが安全です。淡い影はコントラストの低い環境やハイコントラスト表示で見えなくなることがあります。要素の区切りとして意味を持たせるなら、
borderも併用してください。色のコントラストはコントラスト比チェッカーで確認できます。