CSS Box Shadow Generator
Design smooth, modern CSS box-shadows with offset sliders, blur radius, spread, inset mode, and instant CSS copy.
Preview Element
Horizontal Offset (X)
0px
Vertical Offset (Y)
10px
Blur Radius
25px
Spread Radius
-5px
Shadow Opacity
15%
Presets:
🔒
100% Local Browser Privacy
All computation happens right in your browser's JavaScript engine. No data is ever sent to any remote server.
⚡
Instant Results
Zero network latency. Calculations and formatting are executed instantly with high cryptographic and mathematical precision.
🌐
Works Offline
Once loaded, this tool can function completely offline with no active internet connection required.
Frequently Asked Questions
What is the difference between blur and spread?
Blur softens the edges of the shadow, while spread expands or contracts the shadow boundary.
What does inset do?
Inset draws the shadow inside the frame rather than outside, creating a sunken or engraved effect.