Open the Vootkit workspace.
01Design toolTool result
Box-Shadow Generator
Dial in a CSS shadow with live preview.
100% FreeRuns instantlyNo watermark
- 1Choose toolOpen the Vootkit workspace.
- 2Add inputProvide the content or settings.
- 3ProcessLet the browser do the work.
Private by designProcessed on your device where possible.
Works on any deviceDesktop, tablet and mobile browsers.
No installationOpen the page and start working.
Always free coreUse the free plan for everyday tasks.
How to use Box-Shadow Generator
Provide the content or settings.
02Let the browser do the work.
03Copy, download or continue.
04Your files stay private
Your work is processed locally in your browser where possible and is never added to a Vootkit upload library.
Learn more about privacyShadows suggest elevation, and the reason most hand-written ones look wrong is that they ignore how light actually behaves — a real shadow gets larger and softer the further an object sits from the surface.
What Box-Shadow Generator does
Builds CSS box-shadow with live preview — offset, blur, spread and colour.
The rule that makes shadows look real: as an element rises, the shadow should get bigger, softer and lighter. Increasing offset without increasing blur produces the hard drop shadow that dates a design instantly.
The four values
| X and Y offset | Direction — usually 0 and positive Y |
|---|---|
| Blur | Softness — should scale with offset |
| Spread | Grows or shrinks the shadow |
| Colour | Use a transparent black, not grey — see the tip |
| <strong>Higher elevation</strong> | <strong>Larger offset, MORE blur, less opacity</strong> |
| Common mistake | Offset without blur — hard, dated shadow |
| Layering | Two or three shadows read more naturally than one |
| Output | Copy-ready CSS |
Detailed steps
- Start with zero X offset and a small positive Y.
- Set blur to roughly twice the Y offset.
- Use a low-opacity black rather than a grey.
Worth knowing
Use <code>rgba(0,0,0,0.1)</code> rather than a solid grey. A transparent black tints whatever is behind it, so the shadow works on any background; a grey shadow is a fixed colour that looks correct on white and wrong everywhere else — including in dark mode, where it becomes a visible light-grey smear.
Frequently Asked Questions
Why does my shadow look fake?
Usually offset without enough blur. Real shadows soften as they extend, so a large offset with a small blur reads as a hard shape rather than a shadow. Blur roughly double the Y offset is a reliable starting point.
Should I use grey or black?
Transparent black. It tints whatever is behind it and works on any background, whereas a grey is a fixed colour that only looks right on white — and looks obviously wrong in dark mode.
How do I show more elevation?
Increase offset, blur and spread together while reducing opacity. Bigger, softer and lighter is how distance reads. Just making the shadow darker makes it look heavier, not higher.
Can I layer shadows?
Yes — comma-separate them, and it is what most design systems do. A tight dark shadow plus a wide soft one reads far more naturally than any single shadow can.
Is Box-Shadow Generator free?
Yes. The Vootkit free plan includes 5 tool runs a day. Upgrade to Vootkit Pro for unlimited daily use, an ad-free workspace and saved workflows.
Are my files uploaded?
No. Box-Shadow Generator runs entirely in your browser — your file is processed on your own device and never sent to a server. There is nothing for us to store or delete.
Do I need to install anything?
No. Box-Shadow Generator works in any modern browser on desktop, tablet or phone. Open the page and start.
How often can I use it? Is there a daily limit?
On the free plan you get 5 tool runs a day. When you reach the limit you'll see a prompt to upgrade, and it resets the next day. Vootkit Pro removes the cap entirely for unlimited daily use.
Recently viewed
This tool processes everything locally in your browser. You can disconnect from the internet after the page loads and it will still work.