Generate perfect CSS box shadows visually. Add multiple layers, adjust every property, and copy the CSS instantly.
Start with one layer or add multiple for complex shadows. Toggle inset for inner shadows.
Control X/Y offset, blur, spread and color with opacity. See changes instantly.
Copy the generated CSS and paste it directly into your stylesheet.
| Property | Description | Example |
|---|---|---|
| Horizontal Offset (X) | Positive moves shadow right, negative moves left | 4px |
| Vertical Offset (Y) | Positive moves shadow down, negative moves up | 4px |
| Blur Radius | Higher value = more blurred/spread shadow | 10px |
| Spread Radius | Positive expands shadow, negative shrinks it | 0px |
| Color + Opacity | Shadow color in rgba — lower opacity = subtler shadow | rgba(0,0,0,0.25) |
| Inset | Makes shadow appear inside the element instead of outside | inset |