Box Shadow Generator

Create beautiful CSS box-shadow effects with multiple layers for your web design projects.

Shadow Layers

Layer 1

Offset X0px

Offset Y4px

Blur6px

Spread-1px

Color

Opacity: 0.1

Inset Shadow

Layer 2

Offset X0px

Offset Y2px

Blur4px

Spread-2px

Color

Opacity: 0.1

Inset Shadow

Presets

Preview Box

Box Color

Border Radius: 8px

box-shadow

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);

💡

How would you rate the Box Shadow Generator?

MyCalcBuddy Editorial Team

This page is maintained as an educational calculator reference.

ðŸ“š

Formula Source: Standard Mathematical References

by Various

ðŸ”„Last reviewed: May 2026

âœ“Formula checks are based on standard references and internal QA review.