Drop-Shadow Filter Generator
Box shadow hugs a box. This one hugs the shape. Build css filter drop shadow for logos, icons and transparent PNGs, test it on real silhouettes, then copy the filter line.
Free Tool Design System
Tools OverviewDrop-Shadow Filter Generator
Box shadow hugs a rectangle. This one hugs the shape itself. Build css filter drop shadow for logos, icons and transparent PNGs, test it on stars and cutout blobs, then copy the filter line when the depth looks right.
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: Design Token Starter Generator
Shadow system is ready. Capture both shadow types in design tokens.
Shadow layers
Layer drop-shadow effects. drop-shadow hugs the alpha shape , no spread or inset.
Layer 1
Preview & export
See the drop-shadow hug the shape's alpha outline.
Without shadow
With drop-shadow
CSS
filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
When to use drop-shadow vs box-shadow
drop-shadow hugs the alpha shape , use it for logos, icons, and transparent PNGs. box-shadow draws a rectangular shadow around the element's box , use it for cards, buttons, and rectangular surfaces.