CSSボックスシャドウジェネレーター｜リアルタイム

offset-x（水平オフセット）は正の値で右、負の値で左にシャドウをずらします。offset-y（垂直オフセット）は正の値で下、負の値で上にずらします。blur-radius（ぼかし半径）を大きくするほどシャドウがぼんやりします（0で輪郭がシャープ）。spread-radius（スプレッド）は正の値でシャドウを拡大、負の値で縮小します。colorには rgba() を使って色と透明度を指定します。例：box-shadow: 0 4px 6px rgba(0,0,0,0.1) は軽いカードシャドウです。

box-shadowはカンマ区切りで複数定義でき、宣言順に前面から後面に積み重なります。例：box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) のように小さいシャドウと大きいシャドウを重ねると、Material Designのような洗練された立体感が生まれます。プリセットの「カードシャドウ」もこの多層構造を採用しています。

insetキーワードを追加するとシャドウが要素の外側ではなく内側に描画されます。ボタンを押したときの「押し込み」エフェクト・テキスト入力フィールドのフォーカスリング・凹み表現などに活用します。例：box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) は入力欄の内側に軽い影を付けてリアルな凹み感を演出します。ニューモーフィズムデザインでは外側シャドウと内側シャドウを組み合わせて使います。

Google Material Designではelevation（高さ）でシャドウの強さを決めます。低elevation（2dp）：カード・チップなど基本UIに弱いシャドウ。中elevation（4〜6dp）：フローティングボタン・ドロップダウン。高elevation（8〜16dp）：モーダルダイアログ・ナビゲーションドロワー。このツールのプリセットもこの考え方に基づいており、要素の重要度や浮き上がり感に応じてプリセットを選択してください。

ニューモーフィズムは背景と同系色の明るいシャドウと暗いシャドウを両側に配置して凸型の立体感を演出します。実装例：background: #e0e5ec; box-shadow: 9px 9px 16px #b8bec7, -9px -9px 16px #ffffff;。シャドウの色は背景色より約10〜15%暗い色と明るい色を使います。アクセシビリティの観点からは、ニューモーフィズムはコントラストが低くなりがちなため、インタラクティブ要素への適用は注意が必要です。

box-shadowはブラウザのGPUアクセラレーション対象ではなく、特にぼかし半径が大きい場合はCPU描画になりパフォーマンスに影響します。多数の要素に複雑なシャドウを適用する際はwill-change: transform を指定することでGPUレイヤーに昇格しアニメーション時のジャンクを防げます。スクロール中にシャドウをアニメーションさせる場合はopacityやtransformのアニメーションに置き換えることを検討してください。