Skip to main content

Box Shadow Generator

Generate CSS box-shadow styles with visual preview

Shadow Settings

Customize shadow parameters

Preview & CSS Code

Live shadow preview and generated CSS

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

How to Use

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