Box Shadowジェネレーター
リアルで美しいドロップシャドウを作成
Box
CSS Code
影の設定
10px
10px
20px
0px
30%
プレビュー環境
Box Color
Bg Color
Box Shadowジェネレーターの使い方
要素に影を落とすCSS（box-shadow）を生成します。
1
影の位置と質の調整
スライダーで影の水平・垂直位置、ぼかし具合（Blur）、広がり（Spread）を調整します。
2
色の調整
影の色と透明度を設定します。背景色やボック自体の色も変更して確認できます。
3
内側/外側の切り替え
「Inset」スイッチで、影をボックスの内側に落とす表現も可能です。
実際の使用例
ソフトシャドウ
柔らかい影
INPUT
10px 10px 20px 0px rgba(0,0,0,0.1)
OUTPUT
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1);
ハードシャドウ
漫画的な硬い影
INPUT
5px 5px 0px 0px #000000
OUTPUT
box-shadow: 5px 5px 0px 0px #000000;
よくある質問
複数の影を重ねることはできますか？
このツールでは現在、単一の影のみに対応しています。複数の影が必要な場合は、生成されたコードをカンマ区切りで組み合わせてください。
パフォーマンスへの影響は？
過度に大きなBlur値やSpread値、多数の影の重ね合わせは、ページの描画パフォーマンス（特にスクロール時）に影響を与える可能性があります。モバイル向けには控えめな設定が推奨されます。
役立つTips
ニューモーフィズム
背景色と同じ色のボックスを用意し、明るい影と暗い影を組み合わせると、凹凸のある柔らかいデザイン（ニューモーフィズム）が作れます。
マテリアルデザイン
Googleのマテリアルデザインのような浮遊感を出すには、垂直方向の移動（Y軸）とぼかし（Blur）を大きめに設定し、Spreadを小さく（またはマイナスに）するのがコツです。