/ developer tools
CSS Box Shadow Generator
Live
Layer 1
Horizontal Offset0px
Vertical Offset4px
Blur Radius16px
Spread Radius0px
Opacity15%
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.15);
Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.
Generate perfect CSS box-shadow declarations visually. Add multiple shadow layers, each with independent horizontal/vertical offset, blur radius, spread radius, color, opacity, and inset toggle. Choose from 7 presets (Soft, Hard, Blue Glow, Depth, Inset, Neumorphic, Dreamy) or build your own. Customize the preview card color and background. Live CSS output auto-updates as you drag sliders. Copy with one click.
How to Use
- 1Click a preset (Soft, Hard, Glow, etc.) or start with the default shadow
- 2Drag the sliders to adjust horizontal offset, vertical offset, blur, and spread
- 3Use the color picker and opacity slider to set the shadow color
- 4Check 'Inset' to make the shadow appear inside the element
- 5Click 'Add Layer' to stack a second shadow for a more complex effect
- 6Click 'Copy CSS' to copy the box-shadow declaration to your clipboard
Features
- Up to unlimited shadow layers - add, remove, and reorder
- Per-layer: horizontal offset (−100 to +100px), vertical offset, blur radius (0–100px), spread radius (−50 to +50px)
- Color picker with independent opacity/alpha slider
- Inset shadow toggle per layer
- 7 presets: Soft, Hard, Blue Glow, Depth, Inset, Neumorphic, Dreamy
- Adjustable preview card color and background color
- Live CSS output with one-click copy
- 100% browser-based
Frequently Asked Questions
Guest PlanUpgrade
Community Feedback
Like
00
Total Rating
No ratings yetReviews
No reviews yet. Be the first!
Rate & Review
Was this tool helpful?
Rate this tool:
Write a Review
0/500