Box Shadow Generator

Create beautiful CSS box shadows visually. Adjust offset, blur, spread, and color for the perfect shadow!

Offset X: 5px

Offset Y: 5px

Blur: 15px

Spread: 0px

Color

Opacity: 25%

Inset Shadow

Presets

CSS Code

box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);

Features

Visual shadow editor
Multiple shadows
Opacity control
Inset shadows
Preset shadows
Cross-browser CSS

How to Use

1
Adjust sliders to customize shadow
2
Add multiple shadows for depth
3
Toggle inset for inner shadows
4
Copy the generated CSS

Frequently Asked Questions

What is X and Y offset?

X moves the shadow horizontally, Y moves it vertically. Positive values go right/down.

What is blur vs spread?

Blur softens the shadow edges. Spread expands or contracts the shadow size.

What is an inset shadow?

Inset shadows appear inside the element, creating a pressed or carved effect.

Can I use multiple shadows?

Yes! Layer up to 4 shadows for complex, realistic depth effects.

Back to Design Tools