What this generates
CSS box-shadow declarations, built from sliders. The preview updates as you drag, so you see what the shadow looks like before committing the values. The CSS line at the bottom is copy-ready.
Five presets cover the common cases:
- Subtle: 1px nudge, very low opacity. The default Material elevation 1.
- Soft: 4-12px lift, medium opacity. Default for most cards.
- Lifted: dramatic drop with negative spread. For modals and overlays.
- Glow: zero offset, blur with positive spread, brand-colored. For focus states.
- Inset: shadow inside the box, mimicking a pressed button.
Pick a preset, then tune from there.
What each control does
X / Y offset: where the shadow lands relative to the box. Positive Y = below; negative Y = above. Most realistic shadows have Y > 0 because light typically comes from above.
Blur radius: how soft the shadow is. 0 = hard edge (rare; looks unnatural). 4-16px = typical card shadow. 20-50px = exaggerated, theatrical. Higher blur usually means lower opacity to keep the shadow subtle.
Spread: how big the shadow is at full opacity before blur. Negative spread shrinks the shadow inside the box’s boundary, which looks like the box is floating off the page. Positive spread expands the shadow, which looks like a glow.
Opacity: how strong the shadow is. Most realistic shadows sit between 0.1 and 0.3. Anything above 0.5 looks heavy and dated.
Inset: flips the shadow inward. Used for “pressed” UI elements, sunken inputs, and concave surfaces.
Common patterns
A modern Material/Tailwind-style card stack uses multiple shadows layered:
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 12px rgba(0, 0, 0, 0.08);The first shadow is tight and dark, suggesting the immediate edge contact. The second is diffuse and lighter, suggesting ambient occlusion. The combination looks much more realistic than a single shadow at higher opacity.
This generator handles single shadows. For stacked shadows, generate each piece separately and concatenate.
Realistic shadow math
Real shadows in physics depend on:
- Light direction: top-down means Y > 0
- Distance from light: more distance = larger, blurrier shadow
- Height above surface: higher = larger spread, more blur
For a card “floating 4px above the page” under a soft overhead light, sensible values are:
- Y offset: 4-8px
- Blur: 12-24px
- Opacity: 0.08-0.15
For a card “lifted 16px under a stage light”:
- Y offset: 12-20px
- Blur: 32-48px
- Opacity: 0.15-0.25
These aren’t rules, they’re starting points. Designers tune by eye.
Browser compatibility
box-shadow is universally supported (IE9+, all modern browsers). Inset shadows work everywhere too. Multiple comma-separated shadows compose cleanly. There are no compatibility caveats worth mentioning in 2026.
Frequently asked questions
Why does my shadow look pixelated? Likely because the blur radius is very small or the screen has low pixel density. Browsers anti-alias shadow edges, but at 1-2px blur with hard color, edges look crisp/jagged.
Can I add multiple shadows? The generator builds one shadow at a time. To stack, copy the output, then paste two of them into your CSS separated by commas. Future versions may add multi-shadow stacking.
What’s the difference between blur and spread? Spread expands or contracts the shadow’s shape before blurring. Blur softens edges of whatever shape it has. Negative spread + positive blur is how you get a “lifted” effect, the shadow is smaller than the box but very soft.
Should I use box-shadow or filter: drop-shadow?
box-shadow follows the rectangle of the element. filter: drop-shadow follows the actual visible shape (good for irregular shapes, transparent elements, SVGs). For most rectangular UI, box-shadow is faster to render and easier to control.