Box Shadow Generator

Create CSS box shadows visually with multiple layers, blur, spread, and color controls. Copy production-ready CSS instantly.

Background

Box

Radius16px

Presets

Shadow Layers

Layer 1

Inset

X Offset

0px

Y Offset

4px

Blur

20px

Spread

0px

Opacity

10%

CSS

box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
border-radius: 16px;

Frequently Asked Questions

What is CSS box-shadow?▼

box-shadow adds shadow effects around an element's frame. You can set multiple shadows with different offsets, blur, spread, color, and opacity.

Can I add multiple shadows?▼

Yes! Click 'Add Layer' to stack up to 4 shadows. Layered shadows create more realistic, depth-rich effects.

What is inset shadow?▼

Inset shadows appear inside the element instead of outside, creating a pressed-in or sunken effect.

What's the difference between blur and spread?▼

Blur makes the shadow softer/larger. Spread expands (+) or contracts (-) the shadow size before blurring.