Box Shadow Generator
The Box Shadow Generator produces the CSS box-shadow property from sliders for offset, blur, spread, color and inset. Copy the snippet straight into your stylesheet.
Key Features
- Offset, blur, spread sliders
- Inset toggle
- Color with alpha
- Multi-layer shadows
- Copy CSS
Use Cases
- Design a card lift effect
- Add depth to a button
- Create a soft glow
- Teach CSS shadows
How to Use
- Adjust the sliders
- Toggle inset if needed
- Copy the generated CSS
Practical Tips
- Large blur with zero spread looks soft
- Inset flips the shadow inward
- Subtle shadows read as more premium
FAQ
- box-shadow vs filter drop-shadow?
- box-shadow follows the border box; drop-shadow follows the alpha.
- Why no shadow on print?
- Shadows are visual only and often omitted by printers.