☁️ Box-Shadow CSS Generator — Live Preview
Live CSS box-shadow generator: control offset, blur, spread, color, and opacity with live preview and one-click code copy.
0px
10px
20px
0px
20%
📚 About This Tool
The CSS box-shadow property adds shadow around elements. It takes 4-5 values: horizontal offset (X), vertical offset (Y), blur, spread, and color. Adding "inset" makes the shadow internal. For natural depth: use a positive Y (10-20px), Blur about 2× Y, and 15-25% opacity.
❓ FAQ
How do I create a soft shadow?
Use small positive Y (5-10px), large blur (20-40px), spread 0, opacity 10-15%. This mimics natural shadow.
What is an inset shadow?
An inner shadow that makes the element appear "pressed in". Used for active buttons and form fields.
Can I combine multiple shadows?
Yes — separate with commas: box-shadow: 0 1px 2px #000, 0 10px 20px rgba(0,0,0,.1); — useful for multi-layer depth.
Does box-shadow hurt performance?
Large shadows (blur > 50px) can slow mobile scrolling. For best performance, use blur < 30px or use an image.