CSSツール/ボックスシャドウジェネレーター
ボックスシャドウジェネレーター
複数レイヤーとリアルタイムプレビューで美しいボックスシャドウを作成
プレビュー
#F8FAFC
シャドウレイヤー
レイヤー 1
#0000001a
0px
4px
6px
-1px
レイヤー 2
#0000001a
0px
2px
4px
-2px
プリセット
Loading...CSS Box Shadow Guide
Learn how to create depth and dimension with shadows
What is Box Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets, blur and spread radius, and color. It can create depth, highlight elements, and add visual interest to your designs.
How to Use This Tool
- Add shadow layers using the Add Layer button
- Adjust X/Y offset to position the shadow
- Control blur and spread for softness and size
- Toggle 'inset' for inner shadows, then copy the CSS
Pro Tips
- Use multiple subtle shadows for more realistic depth effects
- Negative spread values create tighter, more focused shadows
- Combine outer and inset shadows for neumorphism effects
Browser Support
Box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has been widely supported since IE9, making it safe for production use.
よくある質問
ボックスシャドウとドロップシャドウの違いは何ですか？
box-shadowは要素のボックス全体（ボーダーを含む）にシャドウを適用し、四角形の形状を維持します。一方、drop-shadowはfilterプロパティの一部で、要素の実際の形状（透明領域を含む）に沿ってシャドウを作成します。PNG画像や不規則な形状にはdrop-shadowがより適しています。
複数のシャドウを適用するにはどうすればよいですか？
CSSでは、複数のシャドウをカンマで区切って1つのbox-shadowプロパティに宣言します。例：'box-shadow: 2px 2px 4px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.1);'。先に宣言されたシャドウが上に表示され、複数のレイヤーを組み合わせるとより立体的な深み効果を演出できます。
insetシャドウはいつ使用しますか？
insetキーワードを追加すると、シャドウが要素の内側に表示され、凹んだ効果を作成します。入力フィールド、ボタンの押下状態、ニューモーフィズムデザインによく使用されます。外側シャドウと内側シャドウを組み合わせると、立体的なUI要素を作成できます。
シャドウの色はどのように選べばよいですか？
自然なシャドウには、純粋な黒（#000）の代わりに透明度のある暗い色を使用してください。rgba(0, 0, 0, 0.1〜0.3)の範囲が一般的です。カラフルなデザインでは、背景色より暗い同系色を使用すると調和のとれたシャドウを作成できます。
ボックスシャドウはパフォーマンスに影響しますか？
多くの要素に複雑なシャドウ（特に大きなblur値）を適用すると、レンダリングパフォーマンスに影響を与える可能性があります。スクロールやアニメーション中にシャドウを変更することは避け、可能であればwill-changeプロパティを使用するか、シャドウ画像を代わりに使用することをお勧めします。