CSS Box Shadow Generator — Visual Shadow Builder Free

FREENo LoginInstantBrowser-Only

CSS Box Shadow Generator

Build CSS box shadows visually with real-time preview. Copy the generated CSS code instantly.

Horizontal Offset (px)4px

Vertical Offset (px)4px

Blur Radius (px)12px

Spread Radius (px)0px

Shadow Color

Opacity (%)20%

Inset (inner shadow)?

Click to copy

All calculations run in your browser — nothing stored or sent. More free tools · Etsy Shop

Frequently Asked Questions

What is the CSS box-shadow syntax?

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15). Multiple shadows can be stacked comma-separated: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.05).

What are common box shadow patterns?

Card elevation: 0 2px 8px rgba(0,0,0,0.1). Floating button: 0 4px 12px rgba(0,0,0,0.15). Subtle lift: 0 1px 3px rgba(0,0,0,0.08). Colored shadow: 0 4px 16px rgba(79,70,229,0.3). Inner shadow for input focus: inset 0 2px 4px rgba(0,0,0,0.06).