About CSS Box Shadow Generator
The CSS Box Shadow Generator is a visual tool that helps you create beautiful box shadows for your web designs. Adjust parameters in real-time and see the results instantly. Perfect for designers and developers who want to add depth and dimension to their UI elements.
Box Shadow Parameters
Horizontal Offset (X):
Moves the shadow left (negative) or right (positive). 0 centers the shadow horizontally.
Vertical Offset (Y):
Moves the shadow up (negative) or down (positive). Positive values create a natural drop shadow effect.
Blur Radius:
Controls the blur amount. Higher values create softer, more diffused shadows. 0 creates a sharp shadow.
Spread Radius:
Expands (positive) or contracts (negative) the shadow size. Useful for creating glow effects.
Color & Opacity:
Choose any color and adjust transparency. Lower opacity creates subtle shadows.
Inset:
Creates an inner shadow instead of outer. Useful for pressed button effects.
Common Use Cases
- Cards: Add depth to card components
- Buttons: Create hover and active states
- Modals: Separate overlays from background
- Images: Add subtle shadows to photos
- Navigation: Elevate header and sidebar elements
- Forms: Highlight focused input fields
Shadow Presets
Soft Shadow:
Subtle, minimal shadow for a clean, modern look.
Medium Shadow:
Balanced shadow with good visibility and depth.
Hard Shadow:
Strong, dramatic shadow for emphasis.
Inset Shadow:
Inner shadow for pressed or recessed effects.
Best Practices
- Use subtle shadows for a professional look
- Keep opacity low (10-30%) for realistic shadows
- Positive Y offset mimics natural light from above
- Combine multiple shadows for complex effects
- Use darker shadows for light mode, lighter for dark mode
- Test shadows on different backgrounds
- Consider performance with multiple shadows
Multiple Shadows
You can apply multiple box shadows by separating them with commas:
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);Browser Support
Box-shadow is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes needed.