🔲 Box Shadow Generator

Create custom CSS box shadows with live preview. Adjust offset, blur, spread, and color. Copy the CSS code instantly.

Horizontal Offset: 0px

Vertical Offset: 4px

Blur Radius: 6px

Spread Radius: 0px

Shadow Color:

Inset Shadow: Create inset shadow

CSS Code:

Popular Shadow Presets

Subtle

Small

Medium

Large

Extra Large

Inset

About Box Shadow Generator

The CSS box-shadow property adds shadow effects around an element's frame. You can customize the shadow's offset, blur, spread, color, and whether it's inset or outset.

Properties:

Horizontal Offset: Required. Positive value = shadow to the right
Vertical Offset: Required. Positive value = shadow downward
Blur Radius: Optional. Higher = more blur
Spread Radius: Optional. Positive = larger shadow
Color: Shadow color with opacity
Inset: Optional. Creates inner shadow

Frequently Asked Questions

How do I use the generated CSS?

Click "Copy CSS" to copy the box-shadow property. Paste it into your CSS file or style attribute.

Can I create multiple shadows?

Yes! You can add multiple box-shadow values separated by commas for complex effects.

Related Tools

Gradient Generator Color Converter Color Palette