What this tool does
Adjust offset, blur, spread, and color with live sliders. Toggle inset mode. Preview the shadow on a sample box and copy the CSS.
Example input/output
Illustrative sample — your real inputs may look different.
Example input
X 4 · Y 4 · Blur 12 · Spread 0 · #00000040
Example output
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);
How to use
- Move the sliders for X offset, Y offset, blur, and spread.
- Pick a shadow color and optionally enable inset.
- Copy the generated CSS box-shadow property.