🔲
ボックスシャドウジェネレーター
CSS box-shadowを視覚的に生成します
シャドウ
シャドウ 1
5px
5px
15px
0px
box-shadow: 5px 5px 15px 0px #00000040;ボックスシャドウジェネレーターは、CSS box-shadowプロパティをスライダーとカラーピッカーで直感的に調整し、リアルタイムプレビューで完璧なシャドウ効果を作成するツールです。複数のシャドウレイヤーをサポートしており、カードUI、モーダル、ボタンなどに立体感と奥行きを与えることができます。Insetオプションで内側のシャドウも生成可能です。
📖 使い方
- X、Yオフセットを調整してシャドウの位置を設定してください
- ぼかしとスプレッドでシャドウのサイズを調整してください
- 色を選択してください
- 複数のシャドウを追加してレイヤード効果を作成してください
✨ 主な機能
- ✓視覚的エディター
- ✓複数シャドウレイヤー
- ✓Insetオプション対応
- ✓リアルタイムプレビュー
- ✓CSSコード自動生成
💡 活用事例
- •UIデザイナー: Material DesignやNeumorphismスタイルのカードシャドウを視覚的に調整してデザインシステムに適用します。
- •フロントエンド開発者: ボタンのhoverやactive状態のシャドウ値をリアルタイムでテストしてCSSコードをコピーします。
- •Webパブリッシャー: モーダルダイアログやドロップダウンメニューに適切な奥行き感を持たせるシャドウを作成します。
- •CSSアーティスト: 複数のシャドウレイヤーを重ねて立体的な3D効果やグロー効果を作り出します。
- •デザイン入門者: box-shadowの各値（offset、blur、spread）がどのような役割を果たすか視覚的に理解します。
🎯 活用ヒント
- ▸自然なシャドウにはblur値をspreadの2〜3倍に設定し、色に透明度を適用しましょう。
- ▸複数レイヤーでは近いシャドウはblurを小さく、遠いシャドウはblurを大きく設定するとリアルです。
- ▸Insetシャドウと通常シャドウを組み合わせると、押し込みボタンやNeumorphism効果を作れます。
- ▸シャドウ色には純粋な黒（#000）ではなく、背景色の暗いトーンを使うとより自然です。
- ▸カードUIにはYオフセットをXより大きく設定すると、自然な下向きシャドウが生まれます。
❓ よくある質問
Q. Insetとは何ですか？
A. Insetはシャドウをボックスの内側に表示します。押し込みボタンの効果を作る際に便利です。
Q. 複数のシャドウはどう使いますか？
A. シャドウ追加ボタンで複数のシャドウを重ねて立体感のある効果を作れます。
Q. box-shadowとdrop-shadowフィルターの違いは？
A. box-shadowは要素の矩形ボックスモデルにシャドウを追加し、filter: drop-shadow()は透明領域を除いた要素の実際の形状に沿ってシャドウを作成します。PNG画像など不規則な形状にはdrop-shadowが適しています。
Q. box-shadowはレイアウトに影響しますか？
A. box-shadowは要素のレイアウトサイズに影響を与えません。ただし、overflow: hiddenの親要素でクリップされる場合があるので注意してください。
Q. Neumorphism効果を作るには？
A. 背景色に近い明るいシャドウ（左上）と暗いシャドウ（右下）を同時に適用します。適度なblurと小さなspreadを使用すると柔らかなNeumorphism効果が作れます。