CSS box-shadow generator with live preview
Adjust offset, blur, spread and colour and get copy-paste CSS box-shadow, with a live preview. It generates in your browser (0 uploads, works offline).
How to use it
- Enter your input above.
- The result and a live preview appear on your device.
- Copy or Download it.
FAQ
How do I generate a CSS box-shadow for free?
Set the horizontal and vertical offset, blur, spread and colour, and the box-shadow CSS appears instantly with a live preview in your browser — no upload. Toggle inset for an inner shadow.
What does each value do?
X and Y move the shadow; blur softens its edge; spread grows or shrinks it; the colour (usually a translucent black) sets its strength. The live preview shows the effect of each change immediately.
Is anything uploaded?
No. The CSS is generated locally and nothing is stored; it works offline.
How do I make a subtle shadow?
Use a small Y offset, a generous blur, a slightly negative spread and a low-opacity colour like rgba(16,24,40,0.15) — the defaults are a good starting point.
Limits
Single-layer shadows. Stacking multiple layers is a future addition.
Related
The gradient generator and palette generator are other CSS design helpers.
Bookmark this page (Ctrl+D, or ⌘D on Mac) or install the app — it works offline the next time you need it.