Shadowsmith - Box & Text Shadow Editor

About

Design CSS shadows on the real page — not in a sandbox. Pick an element, tune it live, copy the CSS.

Shadowsmith is a focused box-shadow and text-shadow editor for front-end devs and designers. Instead of guessing values in a separate generator and pasting them back, you edit the shadow directly on the actual element in its real context.

★ PICK ANY ELEMENT
Click "Pick an element", then click the node you want on the page. Shadowsmith highlights elements as you hover and selects the one you click — buttons, cards, headings, anything.

★ BOX & TEXT SHADOWS
Switch between box-shadow and text-shadow. The same layer model drives both (text shadows simply drop spread and inset), so it always emits valid CSS.

★ STACK & TUNE LAYERS
Add as many shadow layers as you need. Each layer has live sliders for offset X/Y, blur, spread, color, opacity, and an inset toggle — reorder or remove layers as you go. Everything updates on the page instantly.

★ PRESETS
One-click starting points: Soft, Layered, Neumorphism, Neon, and 3D text. Tweak from there.

★ COPY CLEAN CSS — AND RESET SAFELY
The CSS shown is exactly what is applied to the element. Copy it with one click. Hit Reset and Shadowsmith restores the element's original shadow exactly — your edits never stick around.

★ 100% LOCAL
Shadowsmith edits the shadow only on the element you pick, only while you work. It reads no page content, requests no host permissions, and makes no network calls. No account.

How it differs:
• vs standalone box-shadow generators (e.g. CSS shadow generators): no sandbox — you edit the real element in its real layout, with the real background behind it.
• vs DevTools: a proper multi-layer builder with presets, a text-shadow mode, one-click clean-CSS copy, and a safe restore — not raw value editing.
• vs general visual editors (e.g. VisBug): focused purely on shadows, so the layer model, presets, and copy output are built around getting shadow CSS right.

For shipping pixel-perfect shadows fast.

Notes: editing applies to the current document only — it can't reach inside cross-origin iframes. On heavily scripted pages a framework may re-render the element and clear the live preview; pick again to continue.