CSS Box-Shadow Generator
One shadow layer rarely feels right. Stack soft and sharp layers, add inset for pressed states, preview on a card and button live, then copy the CSS when depth feels calm not floaty.
Free Tool Design System
Tools OverviewCSS Box-Shadow Generator
One shadow layer rarely feels right. Stack soft and sharp layers, add inset for pressed states if you need it, nudge offsets and blur on a card and button live, then copy the CSS when depth feels calm not floaty.
Catalog Context Part of Design System
See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.
Starter Kits Including This Tool
Next Move - Strong resultDesign System
Recommended: Easing Curve & Motion Studio
Shadows are ready. Pair them with branded easing for a complete feel.
Shadow layers
Add, remove, and configure each layer. Layers stack from top to bottom.
Layer 1
Preview & export
See the shadow on a card and button.
Card Preview
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);