Design layered CSS box-shadows with a live preview and copy the exact code — all in your browser.
Layer 1
CSS
Runs in your browser. Files are never uploaded — you can go offline after the page loads.
How to use the Box Shadow Generator
Adjust each layer’s offset, blur, spread and colour.
Copy the CSS into your stylesheet.
Everything runs in your browser — nothing is uploaded.
Easy to use
Drop files, pick options, download. Whole folders at once, no signup, no daily limit.
Best quality
The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.
Private & secure
Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.
CSS box shadows, built by eye
Shadows make an interface feel layered, but hand-writing the values is fiddly — especially when you stack several. Add as many shadow layers as you need, drag the offset, blur, spread and opacity for each, and watch the box update live. Inset layers cast the shadow inward for pressed or inner-glow effects.
Tune the box colour, corner radius and backdrop to preview the shadow in context, then copy the exact comma-separated box-shadow value. It all runs in your browser. Pair it with the border-radius generator.
Frequently asked questions
Can I layer multiple shadows?
Yes — add as many layers as you like; they combine into one comma-separated box-shadow value, exactly as CSS stacks them.
How do inset shadows work?
Tick “inset” on a layer to cast the shadow inward, for pressed or inner-glow effects.
Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.
No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
No limits. No file-size cap, no queue, no watermark, no account.
Runs on your CPU. Batches use several cores in parallel; nothing is throttled.