CSS Box Shadow Generator: Live Preview & Code
Design CSS box-shadows visually with offset, blur, spread, colour, and inset controls, and layer multiple shadows. Copy the generated CSS in one click.
Runs in your browser. Nothing is uploaded.
How it works
- Step 1: Paste your inputPaste directly into the editor, drop a file onto it, or use "Open file" to pick one from your device. Nothing is sent anywhere when you do.
- Step 2: Run the toolAdjust the options if you need to, then run it. Results appear beside your input so you can compare the two.
- Step 3: Copy or download the resultCopy the result to your clipboard in one click, or save it as a file. You can also keep editing and re-run as many times as you like.
About this tool
- Runs in your browser. All processing happens locally in this tab using JavaScript.
- No uploads. Your data is never sent to a server. There is no server to send it to.
- Works offline. Once the page has loaded you can disconnect and keep working.
- Unlimited & free. No usage caps, no paywall, no file size tiers.
Start with your own data. Open a file
What happens to your data
The same questions a security review would ask, answered plainly.
- Read via
- Typed or pasted into the page
- Held in
- Your browser tab's memory for as long as it is open
- Stored
- Nothing. No cookies, no database, no server-side copy
- Transmitted
- Nothing leaves your device
- Retained after you close the tab
- Nothing
- Works offline
- Yes, once the page has loaded
Why use this tool
What you get here that a server-side alternative cannot offer.
Your data never leaves the tab
There is no upload step and no server to receive one. The page loads once, then all work on your input happens in local JavaScript.
No caps or paywalls
No daily limits, no per-file ceilings imposed by a server tier, no watermarks, and no account. The practical limit is your own device's memory.
Frequently asked questions
Is my design uploaded to a server?
No. Everything runs locally in your browser using JavaScript. Your data is never uploaded to a server, and nothing is stored or logged.
What do the four box-shadow values mean?
Horizontal offset, vertical offset, blur radius, and spread radius. Blur softens the edge; spread grows or shrinks the shadow before the blur is applied.
How do I make a shadow look natural?
Layer two or three shadows: a tight, dark one for contact and a wider, softer one for ambient light. A single large shadow tends to look flat and artificial.
How much data can I paste in?
There is no server-side cap. Very large inputs are limited only by your device's memory and will make the page feel slower, since the work happens on the main thread. In practice a few megabytes of text is comfortable.
Does it work offline?
Yes, once the page has loaded. The code that does the work is already in your browser at that point, so you can disconnect and keep using it. Reloading the page while offline needs the browser cache to still hold it.
Do I need to create an account?
No. There is no sign-up, no email, and no usage tracking tied to an identity. The tool works the first time you open it.