Box Shadow Generator
Generate box-shadow CSS with offsets, blur, spread, opacity, and inset control.
Generate box-shadow CSS with offsets, blur, spread, color, opacity, and an inset option.
Generate box-shadow CSS with offsets, blur, spread, color, opacity, and an inset option.
About the box shadow generator
How this tool works
Shadows are quick to tweak in CSS but awkward to dial in from memory. This tool keeps the most important controls visible in one place with a preview surface.
That makes it useful for everyday interface polish, especially when you are iterating between several surfaces and need repeatable output.
Where it is useful
The preview helps you judge whether a shadow still feels too sharp, too flat, or too heavy before you copy it into code.
Because it reuses the same design-widget shell, it stays consistent with the rest of the micro utility family.
- Create soft shadows for cards, modals, and menus.
- Test inset and raised UI treatments quickly.
- Copy a tuned box-shadow value straight into CSS.
Example workflows
3 examplesSoft card shadow
Copy-ready box-shadow CSS
Inset control enabled
Pressed-style inset shadow output
Higher blur with negative spread
Softer floating panel effect
Common uses
3 ideas- Create soft shadows for cards, modals, and menus.
- Test inset and raised UI treatments quickly.
- Copy a tuned box-shadow value straight into CSS.
FAQ
3 answersWhat settings does the box shadow generator support?
You can adjust horizontal offset, vertical offset, blur, spread, color, opacity, and whether the shadow is inset.
What is the difference between blur and spread?
Blur softens the edge of the shadow, while spread grows or shrinks the size of the shadow footprint.
When is a box shadow generator useful?
Use it when styling cards, overlays, buttons, menus, and other UI surfaces that need depth.