Skip to main content
Home
Services
Products
About
Blogs
Pricing
Login
Menu Icon
Toggle mobile menu open or closed
Back to Home
Box Shadow Generator
Create beautiful CSS box-shadow effects with real-time preview.
Preview
Box Shadow Preview
CSS Code
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.5);
Shadow Properties
Reset
Horizontal Offset (X): 10px
Vertical Offset (Y): 10px
Blur Radius: 20px
Spread Radius: 0px
Color
Opacity: 50%
Inset Shadow
💡 Tips
• Positive X/Y moves shadow right/down
• Negative X/Y moves shadow left/up
• Higher blur radius creates softer shadows
• Spread expands or contracts the shadow
• Inset creates inner shadow effect