Box Shadow Generator

Adjust horizontal and vertical lengths, blur and spread radius, and shadow opacity to create the perfect shadow effect. Choose colors for the shadow, box, and background using intuitive color pickers. Preview the shadow live on a sample box and copy the generated CSS code with a single click. Ideal for enhancing UI elements and adding depth to your designs.

Horizontal Length

Vertical Length

Blur Radius

Spread Radius

Opacity

Outset

Inset

Shadow Color

Background Color

Box Color

        -webkit-box-shadow:  10px 10px 15px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow:  10px 10px 15px 0px rgba(0, 0, 0, 0.1);
        box-shadow:  10px 10px 15px 0px rgba(0, 0, 0, 0.1);