CSS Box Shadow Generator

Create beautiful box shadows with real-time preview.

Preview

Shadow Controls

Horizontal Offset10px

-50px50px

Vertical Offset10px

-50px50px

Blur Radius20px

0px100px

Spread Radius0px

-50px50px

Shadow Color#000000

Opacity25%

0%100%

Inset Shadow (inner shadow)

CSS Output

box-shadow: 10px 10px 20px 0px #00000040;

Complete CSS

.element {
  box-shadow: 10px 10px 20px 0px #00000040;
}

Shadow Presets

How to Use

Use the sliders to adjust shadow parameters in real-time
Horizontal and Vertical offset control the shadow direction
Blur radius makes the shadow softer (higher = more blurry)
Spread radius expands or shrinks the shadow size
Check "Inset" to create an inner shadow effect
Click any preset to quickly apply a shadow style
Copy the generated CSS code and use it in your stylesheets