CSS Box Shadow Generator with Live Preview
Design subtle or strong shadows, preview the result, and copy a production-ready CSS box-shadow value.
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, 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.
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.
Can I copy the CSS?
Yes. Use Copy CSS to copy the generated box-shadow declaration.
What is spread?
Spread expands or contracts the size of the shadow before blur is applied.
Does it support color opacity?
Yes. The generator outputs an rgba color from the selected hex color and opacity.
Does it upload anything?
No. The preview is local to your browser.
Suggested workflow
UI surface polish path
Pick colors, tune depth, and check readability before copying CSS into an interface.