CSS Box Shadow Generator
Create realistic, smooth, and layered shadows for your UI elements.
Adjust offsets, blur, spread, and colors visually, then copy the CSS. 100% Free — No registration required.
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); Layers
Common Use Cases
Where shadows make the biggest impact in UI design
Card Elevation
Add depth to cards and containers. Subtle shadows create visual hierarchy and make content stand out.
Button States
Create pressed/raised button effects with inset shadows. Show interactive state changes clearly.
Modal Dialogs
Large, soft shadows for modals and popups create the floating effect and separate them from background.
Neumorphism
Soft UI design trend using light and dark shadows to create embossed, 3D-like interface elements.
Understanding CSS Box Shadow
The box-shadow property adds one or more shadow effects around an element's frame. Unlike text-shadow, box-shadow can have spread radius and inset option for inner shadows.
Shadow Properties
- Offset X: Horizontal distance. Positive = right, negative = left.
- Offset Y: Vertical distance. Positive = down, negative = up.
- Blur Radius: The larger this value, the bigger and lighter the shadow. Cannot be negative.
- Spread Radius: Positive values expand, negative values shrink. Defaults to 0.
- Color: Shadow color. Use rgba() for transparency control.
- Inset: Changes shadow from outer (default) to inner. Creates pressed effect.
Pro Tips for Natural Shadows
- Use multiple layered shadows for more realistic depth.
- Match shadow direction to your lighting model.
- Subtle shadows (low opacity, soft blur) look more professional.
- Avoid pure black — use dark grays or tinted shadows.
Code Examples
Ready-to-use shadow examples for different UI patterns
/* Simple shadow */
.card {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Layered shadow (smoother) */
.smooth-card {
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
}
/* Large elevation */
.modal {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25);
}/* Inset shadow (pressed state) */
.button-pressed {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
/* Neumorphism effect */
.neumorphic {
background: #e0e5ec;
box-shadow:
9px 9px 16px rgba(163,177,198,0.6),
-9px -9px 16px rgba(255,255,255,0.5);
}
/* Neumorphism pressed */
.neumorphic-pressed {
box-shadow:
inset 6px 6px 10px rgba(163,177,198,0.6),
inset -6px -6px 10px rgba(255,255,255,0.5);
}Frequently Asked Questions
How many shadows can I layer?
There's no limit! Separate each shadow with a comma. Layered shadows create more realistic depth than single heavy shadows. Common patterns use 2-4 layers.
What is inset shadow used for?
Inset shadows appear inside the element, creating a pressed or indented look. Perfect for button pressed states, input fields, or creating depth inside containers.
Why doesn't my shadow work?
Common issues: element has overflow: hidden clipping the shadow, shadow color matches background, or parent element is clipping. Check z-index and parent containers.
How do I create neumorphism effect?
Use two shadows: a light one offset top-left and a dark one offset bottom-right. Both should use soft blur and colors close to the background.