Box Shadow Generator

Generate CSS box-shadow styles with visual preview

Customize shadow parameters

Horizontal Offset: 0px

Vertical Offset: 4px

Blur Radius: 6px

Spread Radius: 0px

Shadow Color

Opacity: 0.10

Inset Shadow

Live shadow preview and generated CSS

Live Preview

CSS Code

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

1. Adjust horizontal and vertical offsets to position the shadow

2. Set blur radius for shadow softness

3. Control spread radius to expand or contract the shadow

4. Choose shadow color and opacity

5. Enable inset for inner shadow effect

6. Copy the generated CSS code and apply to your elements