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 values move shadow right, negative values move it left.
- Offset Y: Vertical distance. Positive values move shadow down, negative values move it up.
- Blur Radius: The larger this value, the bigger and lighter the shadow becomes. Cannot be negative.
- Spread Radius: Positive values expand the shadow, negative values shrink it. Optional, defaults to 0.
- Color: Shadow color. Use rgba() for transparency control.
- Inset: Changes shadow from outer (default) to inner shadow. Creates pressed effect.
Pro Tips for Natural Shadows
- Use multiple layered shadows instead of one heavy shadow for more realistic depth
- Match shadow direction to your lighting model (consistent across UI)
- Subtle shadows (low opacity, soft blur) usually look more professional
- Avoid pure black (#000) — 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);
}/* Colored glow effect */
.glow-blue {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
/* Button with colored shadow */
.button-primary {
background: #3B82F6;
box-shadow:
0 4px 14px rgba(59, 130, 246, 0.4);
}
/* Neon glow */
.neon {
box-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff,
0 0 30px #0ff;
}<!-- Default shadows -->
<div class="shadow-sm"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>
<div class="shadow-xl"></div>
<div class="shadow-2xl"></div>
<!-- Colored Shadow -->
<div class="shadow-lg shadow-blue-500/50">
</div>
<!-- Inner shadow -->
<div class="shadow-inner"></div>
<!-- Hover state -->
<div class="shadow-md hover:shadow-xl transition-shadow">
</div>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 for natural effects.
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 effects inside containers.
Why doesn't box-shadow work on my design?
Common issues: element has overflow: hidden clipping the shadow, shadow color is same as 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. Element background should match the page background.
Does box-shadow affect performance?
Large blur radii and many layered shadows can impact performance, especially during animations. For animated elements, use will-change: box-shadow or consider using pseudo-elements.
What's the difference between blur and spread?
Blur softens the shadow edges — higher values create more diffuse shadows. Spread expands or contracts the shadow size before blurring. Negative spread creates a smaller, more focused shadow.