Loading Shrinkify...
Loading Shrinkify...
Create single or layered box shadows with blur, spread, inset, and opacity controls.
All processing runs locally in your browser. Generated CSS is never uploaded.
Box shadows define depth and focus hierarchy without images. The Box Shadow Generator provides real-time visual preview with offset, blur, spread, color, and inset controls — outputting the exact CSS you need.
Multiple stacked shadow layers trigger compositing. Use 1–2 shadow layers for interactive elements and reserve multi-layer approaches for static hero elements.
Combine with Border Radius Generator for polished card and button styles.
In order: horizontal offset, vertical offset, blur radius, spread radius. A fifth optional value is the color.
Adding the inset keyword creates a shadow inside the element boundary instead of outside — useful for pressed button states.
Yes. Comma-separate multiple shadow declarations. The first in the list renders on top.
Check out our technical guides to learn more about how browser-side processing works.
Read Glossary