CSS Box Shadow Generator with Live Preview
Design subtle or strong box shadows for cards, buttons, modals, popovers, and inset states, then preview the result and copy a production-ready CSS value.
Try a common shadow style
box-shadow: 0px 18px 42px -12px rgba(15, 23, 42, 0.28);
Generated shadows are visual starting points. Check them on the final background, theme, density, and device class before shipping.
A CSS box shadow generator creates a box-shadow value from offset, blur, spread, color, and opacity.
Use lower opacity and higher blur for softer card shadows, stronger offsets for popovers, or inset mode for inner shadows.
Start subtle
Most interface shadows work best with low opacity, moderate blur, and small offset.
Test on the real background
A shadow that works on white may look heavy on tinted, dark, or image backgrounds.
Match the elevation role
Cards, popovers, buttons, and inset states should not all use the same shadow strength.
Example
A soft card shadow often uses low opacity, high blur, and a small negative spread.
Assumption
The tool generates a single shadow layer for readable, portable CSS.
Limitation
Complex elevation systems may combine multiple shadows and theme tokens.
Card elevation
Create subtle shadows for dashboard panels, pricing cards, and tool surfaces.
Popover depth
Tune larger blur and offset values for menus, modals, and floating panels.
Inset fields
Use inset mode for pressed states, wells, and inner shadow details.
Design systems
Prototype a shadow value before converting it into a named token.
card shadow CSS
Create low-opacity card elevation for dashboards, pricing cards, forms, and tool panels.
button shadow CSS
Tune a compact button or badge shadow without making the control look blurry or heavy.
inset box shadow
Generate inner shadows for pressed states, wells, and subtle surface details.
What does box-shadow do?
The CSS box-shadow property adds shadows around or inside an element box.
Can I create inset shadows?
Yes. Enable inset mode to place the shadow inside the element for pressed states, wells, or inner-shadow details.
What is spread?
Spread expands or contracts the size of the shadow before blur is applied.
How is the preview processed?
The preview and generated CSS are handled in the browser for this tool based on the current public implementation.
Suggested workflow
UI surface polish path
Pick colors, tune depth, and check readability before copying CSS into an interface.