Create custom CSS box shadows – offset, blur, spread, color & inset – live preview & code
Want to embed this box shadow generator on your website? Use this code:
Learn how horizontal, vertical, blur, spread, color and inset work together.
Read Tutorial →Create depth by combining several shadows in one declaration.
Read Tutorial →| Feature | Our Tool | Tool A | Tool B |
|---|---|---|---|
| Free & unlimited | ✅ | ✅ | ❌ (limit) |
| Live preview | ✅ | ✅ | ✅ |
| Spread radius | ✅ | ✅ | ❌ |
| Inset shadow | ✅ | ✅ | ✅ |
| Opacity control | ✅ | ❌ | ✅ |
| Negative offset | ✅ | ✅ | ✅ |
| Download CSS file | ✅ | ❌ | ✅ |
| Client-side / private | ✅ | ❌ | ✅ |
Blur radius controls the softness – higher = more blurred edge. Spread radius expands or contracts the shadow size without blurring.
This generator currently creates a single shadow for simplicity. You can easily combine several shadows by copy‑pasting and comma‑separating them in your CSS.
Check that "Enable Shadow" is checked, opacity is above 0, and the offset values aren't extreme. Also make sure the color is not too similar to the background.
Yes, inset works on any box element, but the effect is most noticeable on elements with a background color or border.
Box shadows add depth, hierarchy, and visual interest to UI elements. A well‑placed shadow can make a card appear elevated, a button feel clickable, or a modal stand out.
Larger blur and offset = higher elevation. Useful for modals and dropdowns.
Use inset or colored shadows to highlight focused inputs.
Shadows are GPU‑accelerated; use them instead of images for scalability.
Tools to enhance your UI workflow