Skip to content
Tools/CSS Box Shadow

CSS Box Shadow Generator

Build layered box shadows with live preview — copy the CSS when it looks right.

Presets

Layer 1
X Offset0px
Y Offset4px
Blur16px
Spread-2px
Opacity15%
CSS Output
box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.15);

Preview BG

Card Color

Preview

Quick Copy

CSS Propertybox-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.15);
Value only0px 4px 16px -2px rgba(0, 0, 0, 0.15)
Tailwind customshadow: '0px 4px 16px -2px rgba(0, 0, 0, 0.15)'

Related Tools

CSS Gradient GeneratorCSS Animation GeneratorCSS Filter GeneratorFlexbox PlaygroundCSS Minifier / FormatterCSS Grid Generator

🔍 Automate Your Design System and UI Development with AI

CSS utilities are table stakes. In 20 minutes I'll audit your design system and show you where AI can automate component generation, design token management, and cross-browser testing — end to end.

Get Your Free AI Scan →