CSS box-shadow ジェネレーター

用途

CSS の box-shadow プロパティは、奥行きを表現する万能ツールです。カードのドロップシャドウ、ボタンのハイライト、フォーカスリング、グロー、ネオン効果、簡易的な 3D まで、これ一つでこなせます。構文（x y blur spread color、オプションの inset、カンマ区切りで複数）は読みやすい一方、目視で調整するのは面倒です。本ツールは各値のスライダーとライブプレビューに加え、よくあるデザインシステムのエレベーションに合うプリセットを提供します。

使うべきタイミング

• カードやモーダルのエレベーションを「安っぽく」「硬く」見えないように設計したいとき。
• アクセシビリティ向けのフォーカスリング（例：2px のアウトライングロー）を作るとき。
• ヒーローの CTA にネオン／グロー効果を作るとき。
• Material Design や Apple 風のエレベーショントークンをデザインシステム用に再現するとき。
• 押下されたボタンや凹んだカードを表現する偽の "inset" 奥行きを作るとき。

各値の意味

• X / Y オフセット — 影が落ちる方向（Y が正なら下方向）。「上から光」の雰囲気には Y > 0 と X 小さめ（または 0）が合います。
• Blur — エッジの柔らかさ。0 = シャープ、大きいほど柔らかいフェードに。
• Spread — シャドウがボックス自体よりどれだけ大きい（または負なら小さい）か。
• 色とアルファ — 通常は半透明の黒、またはブランドカラー。純粋な #000 は重すぎるので、自然な奥行きには #0002〜#0003 あたりが有効です。
• Inset — シャドウを内側に反転させ、凹みのように見せます。

よくある注意点

• 大きなシャドウ 1 枚は不自然に見えます。 本物のエレベーションは、近くて濃く絞ったシャドウと、遠くて柔らかく広いシャドウを 2〜3 枚重ねます。「Material elevation」プリセットがその典型です。
• 純黒は重すぎます。 黒のアルファ 10–25% 程度を使うか、表面の補色で温かみを足すといい感じになります。
• シャドウはボックスの外側に描画されます。 コンテナに overflow: hidden があるとクリップされます。ラッパーを使うか、overflow を子要素に移してください。
• 背景が透明なボックスのシャドウ。 ボックスに background がないと、シャドウがボックスを透過して見えてしまいます（だいたい意図しない結果）。
• パフォーマンス： 大きな blur を多数の要素に適用すると、低スペックモバイルで重くなることがあります。派手なグローを出す前に実機で確認しましょう。
• ダークモード。 暗背景に微妙な暗いシャドウはほとんど見えません。明るいインナーボーダーや、明色寄りのシャドウを検討してください。