How do I add multiple box shadows?

Click the 'Add Layer' button to create a new shadow layer. You can stack up to 6 distinct shadows on a single element to create complex, realistic depth effects.

What is an inset shadow?

An inset shadow is drawn inside the element instead of outside. This creates the illusion that the element is pushed into the page rather than raised above it. You can toggle this using the 'Inset' button in the layer properties.

Box Shadow Generator

Craft perfect, multi-layered shadows. Fine-tune offsets, blur, spread, and opacity, then grab the pure CSS code.

Shadow Layers

Layer 1

Layer 2

Edit Selected Layer

Horizontal Offset (X)

Vertical Offset (Y)

Blur Radius

Spread Radius

Opacity10%

Shadow Color

BOX

Quick Presets

CSS Code

box-shadow: 0px 10px 30px -10px rgba(0, NaN, 0, 0.1), 0px 4px 6px -2px rgba(0, NaN, 0, 0.05);

Why use our free design tools?

✓100% Free Forever

No hidden fees, no credit card required, and absolutely no premium lockouts. Everything works completely free, forever.

✓Zero Ads. No Login.

We respect your focus. You won't see annoying banners or popups here. No account creation or email signup required to use the tools.

✓Private & Secure

Processing happens right in your browser. Your images, colors, and design data are never uploaded to our servers. Fast and completely private.

Need more design power?

Inspo AI gives you AI search, moodboards, brand audits, and competitor scanning — all in one workspace.

Try Inspo AI Free