CSS Box Shadow Generator
Shadow Properties
Creates an inner shadow instead of outer
Presets
CSS Code
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);Multi-Browser Support:
-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);Live Preview
Box Shadow
Common Use Cases
Button
Card
Card Title
This is a card with your custom shadow.
Image
Property Explanation
Horizontal Offset
Moves shadow left (negative) or right (positive)
Vertical Offset
Moves shadow up (negative) or down (positive)
Blur Radius
How soft/blurry the shadow is (0 = sharp)
Spread Radius
Expands (positive) or contracts (negative) shadow size
Color & Opacity
Color and transparency of the shadow
Inset
Makes shadow appear inside the element
About CSS Box Shadow
CSS box-shadow adds depth and dimension to elements on your webpage. Create subtle shadows for cards, dramatic shadows for floating elements, or inset shadows for pressed effects.
Syntax:
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
Common Use Cases:
- Cards and panels for depth perception
- Buttons to indicate clickability
- Images and media for visual separation
- Modals and popups for layering
- Navigation bars for elevation
- Form inputs for inset effects
Design Tips:
- Use subtle shadows (low opacity) for modern, clean designs
- Vertical offset should usually be larger than horizontal
- Higher blur radius creates softer, more realistic shadows
- Match shadow color to background or use neutral grays/blacks
- Avoid excessive spread - it can look artificial
- Layer multiple shadows for complex effects
Multiple Shadows:
You can stack 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);
Performance:
- Box-shadow is GPU-accelerated in modern browsers
- Multiple shadows can impact performance on complex pages
- Consider using transforms for animations instead of animating box-shadow
How It Works
Box shadow generators create CSS box-shadow declarations using five parameters: horizontal offset, vertical offset, blur radius, spread radius, and color. The syntax is: box-shadow: offset-x offset-y blur-radius spread-radius color. Positive offset-x moves shadow right, negative moves left. Positive offset-y moves down, negative up. Blur radius controls softness (0 = sharp edge). Spread radius expands (positive) or contracts (negative) the shadow before blurring. Color includes optional alpha for transparency (rgba). The inset keyword creates inner shadows. Multiple shadows are comma-separated: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2). Generators provide sliders/inputs for each parameter, color pickers, live preview, and generate optimized CSS. Advanced features include shadow layer stacking, preset libraries (material design, iOS), and RGBA/HEX color conversion.
Use Cases
1. Card & Panel Elevation
Create depth hierarchy in UI through shadow elevation systems. Material Design uses systematic shadow layers to indicate z-axis position and element importance.
2. Button States
Design hover, active, and focus states using shadow changes. Lifting effect (larger shadow) on hover, recessed effect (smaller/inner shadow) on active.
3. Modal & Dropdown Overlays
Add shadows to modals, tooltips, dropdowns to separate them from background content. Larger, softer shadows create stronger depth perception.
4. Image & Media Treatment
Apply subtle shadows to images, videos, and media elements for polish. Prevents images from appearing "flat" against backgrounds.
5. Form Input States
Use inner shadows for input fields, outer shadows for focus states. Colored shadows (blue for focus, red for errors) provide visual feedback.
Create depth hierarchy in UI through shadow elevation systems. Material Design uses systematic shadow layers to indicate z-axis position and element importance.
2. Button States
Design hover, active, and focus states using shadow changes. Lifting effect (larger shadow) on hover, recessed effect (smaller/inner shadow) on active.
3. Modal & Dropdown Overlays
Add shadows to modals, tooltips, dropdowns to separate them from background content. Larger, softer shadows create stronger depth perception.
4. Image & Media Treatment
Apply subtle shadows to images, videos, and media elements for polish. Prevents images from appearing "flat" against backgrounds.
5. Form Input States
Use inner shadows for input fields, outer shadows for focus states. Colored shadows (blue for focus, red for errors) provide visual feedback.
Tips & Best Practices
• Use subtle shadows (2-8px blur) for most UI elements
• Layer multiple shadows for more realistic depth (small sharp + large soft)
• Keep shadow colors dark gray (rgba(0,0,0,0.1-0.3)), not pure black
• Match shadow direction across all elements (usually from above/center)
• Use inset shadows for pressed/recessed appearances
• Animate shadow changes for smooth hover effects
• Test shadows on different backgrounds - visible on white, subtle on colored
• Material Design: elevation increases with offset and blur, not spread
• Layer multiple shadows for more realistic depth (small sharp + large soft)
• Keep shadow colors dark gray (rgba(0,0,0,0.1-0.3)), not pure black
• Match shadow direction across all elements (usually from above/center)
• Use inset shadows for pressed/recessed appearances
• Animate shadow changes for smooth hover effects
• Test shadows on different backgrounds - visible on white, subtle on colored
• Material Design: elevation increases with offset and blur, not spread
Frequently Asked Questions
Related Tools
Explore more tools that might help you