Box Shadow Generator

Preview

Preview Background

Generated CSS

Loading...

Box Properties

Width

Height

Border Radius

Background Color

Shadows

Shadow Properties

Inset Shadow

Shadow Color

X Offset

Y Offset

Blur

Spread

Opacity

About Box Shadow Generator

Create and customize CSS box shadows with live preview. Perfect for adding depth and dimension to your web elements.

How to Use Box Shadow Generator

Adjust the box dimensions and border radius
Customize the shadow offset, blur, and spread
Choose shadow color and opacity
Toggle inset shadow effect
Preview on different backgrounds
Copy the generated CSS code
Use the randomize button for inspiration