CSS Box Shadow Generator
Design CSS box-shadows with a live preview — offset, blur, spread, color, opacity, and inset. Copy the CSS in one click. Runs in your browser.
Runs in your browser — nothing uploaded
Shadow
0px
10px
20px
0px
25%
#0f172a
CSS
box-shadow: 0px 10px 20px 0px rgba(15, 23, 42, 0.25);
Build CSS box-shadows with a live preview and copy the code instantly. Adjust the horizontal and vertical offset, blur, spread, color, and opacity, or switch to an inset shadow — then drop the generated CSS straight into your stylesheet.
Private by design — your data never leaves your device
How to use it
No account, no upload — it all happens on your device.
1
Drag the offset, blur, and spread sliders to shape the shadow.
2
Pick a shadow color and set its opacity.
3
Toggle Inset for an inner shadow if you want one.
4
Copy the generated box-shadow CSS.
The box-shadow values
Reading box-shadow: 0px 10px 20px 0px rgba(15,23,42,0.25).
| Value | Role |
|---|---|
| 0px | Horizontal offset (X) |
| 10px | Vertical offset (Y) |
| 20px | Blur radius — larger is softer |
| 0px | Spread — grows or shrinks the shadow |
| rgba(15,23,42,0.25) | Shadow color and opacity |
Shadows that look natural
- Light comes from above. A small positive Y offset with low opacity reads as a believable drop shadow.
- Soft beats hard. Generous blur and low opacity (10–25%) look more modern than a tight, dark shadow.
- Stack for elevation. Real design systems layer two or three shadows — a tight one plus a wider, softer one — to suggest height. Generate each and combine them with commas.
Frequently asked
What do offset, blur, and spread do?
Offset X and Y move the shadow horizontally and vertically. Blur softens its edges — higher values are fuzzier. Spread grows or shrinks the shadow before the blur is applied. Together they control how lifted or grounded an element looks.
What is an inset shadow?
An inset shadow is drawn inside the element instead of behind it, making the box look pressed in or recessed rather than raised. Toggle Inset to switch between the two.
Is my design sent to a server?
No. The preview and the CSS are produced entirely in your browser. Nothing is uploaded.