Box Shadow Generator

Free online Box Shadow Generator tool. Quick, fast, and 100% free Developer Tools utility with zero installation or sign-up required.

Create beautiful CSS box-shadow effects with real-time preview. Customize every aspect and copy ready-to-use code.

Your box-shadow will appear here

Light Dark Gradient

Horizontal Offset 10px

-100 0 100

Vertical Offset 10px

-100 0 100

Blur Radius 20px

0 50 100

Spread Radius 0px

-50 0 50

Shadow Color

Opacity 0.5

0% 50% 100%

Advanced Options

Inset Shadow Multiple Shadows

                
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.5);

Copied to clipboard!

1. Copy the CSS code above

2. Paste it into your CSS file

3. Apply to any element: .element { box-shadow: ... }