CSS box-shadow. Multi-layer ยท inset ยท glow ยท neumorphism.
๐ Preview
๐ฆ Shadow Card
How to use
- Pick style (7 presets).
- Adjust X/Y offset, blur, spread.
- Set shadow color and opacity.
- Copy CSS.
Key features
- 7 preset styles
- X/Y ยฑ40 px, blur 0โ80 px, spread ยฑ20โ40 px
- Shadow color + opacity
- Inset, glow, neumorphism auto-generated
- Layered multi-shadow for max depth
Use cases
- Card UI โ Material Design, modals, popups
- Button hover โ lift effect
- Image galleries โ photo depth
- Form inputs โ focus glow
- Neumorphism UI โ dual-side soft depth
Mastering box-shadow
Syntax: `box-shadow: X Y BLUR SPREAD COLOR;` (use `inset` for inner shadow). (1) Y positive, X zero mimics sunlight from above. (2) BLUR โฅ Y for soft shadows; BLUR < Y for sharp. (3) SPREAD grows/shrinks the shadow area itself. (4) Comma-separate multiple shadows for layered depth โ closer to real light (Material Design Elevation system).
FAQ
vs filter:drop-shadow?
`box-shadow` follows the box; `filter:drop-shadow` follows the alpha mask (works on transparent PNGs).
Performance?
Large blur (>40 px) + multi-layer hurts mobile performance, especially with transform animations.
Dark mode?
On dark backgrounds, deepen shadow color or increase opacity. Or use a white glow.
Free?
Yes.