← Back to Home

Box-Shadow Generator

Horizontal Offset (X)10px
Vertical Offset (Y)10px
Blur Radius15px
Spread Radius-3px
Shadow Color
Shadow Opacity
box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.20);
How it works: It links multiple range sliders to dynamically adjust the box-shadow CSS property of the preview box. It also converts the HEX color input into an RGBA format using JavaScript to properly apply the opacity slider.