CSS Box ShadowGenerator Tool
Create beautiful, customizable box shadows for your web projects with our free interactive generator. Adjust parameters in real-time and copy the CSS code with a single click.
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);Tip: For multiple shadows, copy each shadow and combine them with commas in your CSS.
Using the Box Shadow Generator
- Adjust the sliders to modify the shadow's appearance
- Horizontal offset moves the shadow left (negative) or right (positive)
- Vertical offset moves the shadow up (negative) or down (positive)
- Blur affects how soft the shadow appears (0 = sharp edge)
- Spread expands (positive) or contracts (negative) the shadow size
- Toggle "Inset" to create an inner shadow effect
- Copy the generated CSS with one click
- For complex effects, create multiple shadows and combine them in your CSS
Ready-to-Use Box Shadow Examples
Choose from our professionally designed box shadow presets. Click any example to copy its CSS code instantly.
Subtle
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);Medium
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);Heavy
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);Material 1
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);Material 2
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);Material 3
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);Floating
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08);Inner Shadow
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);Layered
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12);Neumorphic Light
box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;Neumorphic Pressed
box-shadow: inset 5px 5px 10px #d1d1d1, inset -5px -5px 10px #ffffff;Neumorphic Button
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;Where to Use Box Shadows
Learn how box shadows can enhance your web designs with these practical applications.
Cards & Components
Create depth and hierarchy by applying shadows to cards, containers, or UI components.
Common Examples:
- User profile cards
- Product information boxes
- Dashboard widgets
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);Interactive Elements
Add interactive feedback by changing shadow properties on hover, focus or click states.
Common Examples:
- Buttons and call-to-actions
- Form inputs and controls
- Navigation items
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease;Modal & Popups
Draw attention to important dialogs by using stronger shadows to make elements stand out.
Common Examples:
- Notification popups
- Modal dialogs
- Tooltips and alerts
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);3D Effects
Create the illusion of depth and dimension with strategic shadow placement.
Common Examples:
- Layered interface elements
- Stacked cards or panels
- Parallax sections
box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11);Use our generator above to customize these examples to match your website's design system.
Frequently Asked Questions
Everything you need to know about CSS box shadows and how to use them effectively.