Design and preview CSS box shadows with live output
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
Free CSS box-shadow generator. Add multiple shadow layers, adjust offset, blur, spread, and color, and preview them in real time. Copies CSS in one click.
Yes. CSS supports layering multiple shadows separated by commas. Add as many layers as you need.
An inset shadow renders inside the element rather than outside, creating a recessed or pressed effect.
Spread expands or contracts the shadow. A positive spread makes it larger than the element; negative makes it smaller.
Use a large blur radius, zero spread, and a low-opacity color like rgba(0,0,0,0.15).
No. Unlike outline or border, box-shadow does not take up space in the layout.
Last updated: January 2025