box-shadow: 0px 8px 24px -4px rgba(0,0,0,0.25);
This runs in your browser. Nothing is uploaded.
About Box shadow generator
Compose CSS box-shadow layers, including inset shadows, with live preview and a copy button.
A decent shadow is usually more than one layer: a tight contact shadow plus a softer ambient one, sometimes an inset for pressed UI. Typing that by hand is slow; uploading a design to a random generator that keeps your hex history is worse. This page stacks layers and shows the combined preview.
Toggle inset, nudge offset, blur, spread, and color per layer. The CSS string updates as you go. Copy when the card or button looks right. Nothing is applied outside this tab.
Pair with border-radius when the shape matters, and with the gradient generator when the surface behind the shadow is not flat. Clamp helps if you want shadow-related spacing to scale with the viewport — separate tool, same CSS category.
How to use Box shadow generator
- 1Add or select a shadow layer.
- 2Set offset, blur, spread, color, and inset as needed.
- 3Copy the combined box-shadow declaration.
What it won't do
- box-shadow only — no filter: drop-shadow editor.
- You paste the result; we do not push styles remotely.
Common questions
Can I stack multiple box-shadows?
Yes. Each layer becomes a comma-separated part of one box-shadow value, which is how CSS expects multiple shadows.
What does inset do?
Inset draws the shadow inside the element’s box — useful for wells, pressed buttons, and inner highlights.
Does the preview inject CSS into my site?
No. Copy the output and paste it yourself. The preview is local to this page.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation