Design drop and inset shadows visually — drag the offset, blur, spread, color, and opacity, stack multiple layers, and copy clean CSS when it looks right.
A good shadow is what makes a button feel clickable and a card feel like it's floating above the page. The CSS box-shadow property does it, but the syntax — five values plus a color, optionally repeated for layered shadows — is fiddly to tune by hand. This tool lets you design the shadow visually with a live preview and writes the exact CSS for you to copy.
It runs entirely in your browser, with no account and nothing uploaded, so it's a quick, private scratchpad whenever you need a shadow.
inset for an inner shadow that looks pressed-in instead of raised.box-shadow declaration and paste it straight into your stylesheet.box-shadow: x-offset y-offset blur spread color; — for example box-shadow: 0 10px 25px rgba(5,102,141,0.22);.inset at the start for an inner shadow.rgba() so the opacity slider works independently of the color.Drag the offset, blur, spread, and opacity controls against the live preview until the shadow looks right, then copy the generated box-shadow CSS. No syntax memorization, no deploy-refresh loop.
Layer several soft shadows: real light produces both a tight contact shadow and a wide ambient one. The generator stacks multiple layers in one box-shadow declaration, which is how the smooth elevated look is actually built.
Inset flips the shadow inside the element, creating pressed and recessed effects for inputs and active button states. The toggle previews it live.
Offset-x, offset-y, blur, spread, then color, with optional inset in front, and multiple shadows separated by commas. The generator emits it correctly so the order never bites you.
Usually full-black color at too much opacity with too little blur. Lower the opacity, increase the blur, and consider tinting the shadow toward your background hue; the preview makes the difference obvious.