Box Shadow Generator - Create Perfect CSS Shadows
Free online CSS box shadow generator with live preview. Create stunning shadows with multiple layers, customize offset, blur, spread, and color. Export CSS code instantly for your web projects.
Shadow Preview
Shadow Settings
Shadow 1
CSS Code
box-shadow: 0px 4px 6px 0px #00000040;
Pro Tips
- • Use subtle shadows for a modern, flat design aesthetic
- • Layer multiple shadows for depth and realism
- • Inset shadows create pressed or recessed effects
- • Match shadow color to your background for natural look
What is CSS Box Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas, controlling the shadow's position, blur, spread, color, and whether it appears inside (inset) or outside the element. Box shadows are essential for creating depth, elevation, and visual hierarchy in modern web design.
Unlike traditional image-based shadows, CSS box shadows are lightweight, scalable, and easy to modify. They're supported across all modern browsers and can be animated for interactive effects. Box shadows are commonly used for cards, buttons, modals, and any UI element that needs to appear elevated from the page.
Box Shadow Syntax Explained
box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];Changes the shadow from outer (default) to inner shadow, creating a pressed or recessed effect.
Horizontal offset. Positive values move shadow right, negative values move it left.
Vertical offset. Positive values move shadow down, negative values move it up.
The larger the value, the softer and more spread out the shadow becomes. Default is 0 (sharp shadow).
Positive values expand the shadow, negative values shrink it. Default is 0.
Shadow color. Can use hex, RGB, RGBA, HSL, or named colors. Use RGBA for transparency.
Common Box Shadow Examples
1. Subtle Card Shadow
Perfect for cards and containers in modern, flat designs:
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);2. Medium Elevation
Creates noticeable depth for important UI elements:
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);3. Large Shadow (Modals/Overlays)
Strong elevation for modals and floating elements:
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);4. Inset Shadow (Pressed Effect)
Creates a recessed or pressed appearance:
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);5. Colored Shadow
Add brand colors to shadows for unique effects:
box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.05);Best Practices for Box Shadows
- Use Multiple Layers: Combine 2-3 shadows for realistic depth (ambient + directional shadows)
- Keep It Subtle: Overly dramatic shadows can look dated. Modern designs favor subtle elevation
- Match Light Source: Consistent shadow direction creates cohesive design (typically top-left)
- Use RGBA Colors: Allows transparency control for natural-looking shadows
- Consider Performance: Complex shadows with large blur radius can impact rendering performance
- Test on Different Backgrounds: Shadows appear differently on light vs dark backgrounds
- Animate Carefully: Shadow transitions can be expensive; use transform for hover effects when possible
- Accessibility: Don't rely solely on shadows for important visual cues
Advanced Box Shadow Techniques
Material Design Elevation
Google's Material Design uses specific shadow combinations for different elevation levels:
/* Elevation 1 */
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);Neumorphism (Soft UI)
Create soft, extruded effects with dual shadows:
box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2), -12px -12px 24px 0 rgba(255, 255, 255, 0.5);Glow Effect
Create glowing effects for focus states or highlights:
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);Frequently Asked Questions
Can I use multiple box shadows on one element?
Yes! Separate multiple shadows with commas. This is recommended for creating realistic depth by combining ambient and directional shadows. Example: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
What's the difference between box-shadow and drop-shadow?
box-shadow creates a shadow around the element's box, while drop-shadow (a CSS filter) creates a shadow that follows the element's actual shape, including transparency. Use box-shadow for rectangular elements and drop-shadow for irregular shapes or images with transparency.
Do box shadows affect layout or performance?
Box shadows don't affect layout (they don't take up space), but complex shadows with large blur radius can impact rendering performance, especially when animated. For better performance, use transform for hover effects instead of animating the shadow directly.
How do I create a border-like effect with box-shadow?
Set x-offset, y-offset, and blur to 0, then use spread-radius for thickness: box-shadow: 0 0 0 2px #3b82f6; This is useful for focus rings and can be combined with actual borders.
What browsers support box-shadow?
All modern browsers fully support box-shadow without vendor prefixes. It's been standard since IE9+, so you don't need -webkit- or -moz- prefixes anymore. For very old browsers, provide a fallback border or background color.