Box Shadow
Layered CSS shadows with a live card.
Loading tool
Stack a soft ambient layer and a tighter contact shadow. The card preview uses the exact CSS string.
How to use this tool
- Enter the source text. Type the URL, password rules, or other input the generator needs.
- Generate. Create the code, image, or snippet in this tab.
- Copy or download. Save the SVG, CSS, or text. Refreshing the page starts over.
Layers
One layer is a simple drop. Two layers usually look more natural. Inset mode is for pressed controls.
Frequently asked
Why does the shadow look different on a dark page?
Use a lighter, lower-opacity shadow on dark surfaces.
Is filter: drop-shadow the same?
No. drop-shadow follows alpha and ignores spread. This page emits box-shadow.
Can I match Material elevation?
Presets approximate common elevations. They are not an official spec dump.
Does it output Tailwind classes?
It outputs CSS. Map the values to a theme token if you use Tailwind.
Will shadows print?
Browsers often drop them in print. Check a print preview.