CSS Box Shadow Generator

CSS Box Shadow Generator

About this tool: Create custom CSS box shadows with live preview. Adjust horizontal and vertical offset, blur, spread, color, and other properties to get the perfect shadow effect for your web elements.

How to use: Use the sliders to adjust shadow properties and see the changes in real-time. You can add multiple shadows by clicking the "Add Shadow" button. Copy the generated CSS code to use in your projects.

Horizontal Offset (px)

Vertical Offset (px)

Blur Radius (px)

Spread Radius (px)

Shadow Color

Opacity

Inset Shadow

Preview

box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

Code copied to clipboard!