Box Shadow Generator
Create CSS box-shadow effects visually with real-time preview and copy-ready code
How to use: Adjust shadow properties using the controls, add multiple shadows for layered effects, and copy the generated CSS code for your projects.
Shadow Controls
Configure shadow properties
Position
Blur & Spread
Color & Opacity
Live Preview
Real-time shadow preview
Preview Element
Generated CSS
Copy this CSS code to your stylesheet
/* CSS */
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
/* With vendor prefix for older browsers */
-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);Shadow Layers (1)
All configured shadow layers
Layer 1
0px 4px 6px 0px rgba(0, 0, 0, 0.25)
Usage Examples & Tips
Common Use Cases:
- • Card components and containers
- • Button hover and focus states
- • Modal dialogs and overlays
- • Image and media elements
- • Navigation bars and sidebars
- • Form inputs and interactive elements
Pro Tips:
- • Use subtle shadows for modern flat designs
- • Layer multiple shadows for depth
- • Negative spread creates inner glow effects
- • Inset shadows create pressed/recessed look
- • Match shadow direction with your light source
- • Test shadows in both light and dark themes