A well-placed box shadow adds depth and polish to any UI element. Our generator lets you adjust horizontal and vertical offset, blur, spread, color, and opacity with a live preview. The CSS code updates automatically - just copy and paste into your stylesheet.
Shadow Properties Explained
- Offset moves the shadow left/right and up/down. Keep both small (2-5px) for subtle depth.
- Blur softens the edges. Higher values (10-20px) create diffused, realistic shadows.
- Spread expands or contracts the shadow. Use 0 for most cases.
- Opacity controls transparency. Start at 15-30% for subtle shadows.
- Inset flips the shadow inward for a recessed, pressed-button effect.
Common Patterns
For card shadows, try offset: 0, blur: 10px, opacity: 10%. For hover effects, increase blur to 20px and opacity to 15%. For glow effects, set offset to 0, add generous blur (20-40px), and use a bright color. Layer multiple shadows by separating them with commas in the CSS output.