CSS Tool

Box Shadow Generator

Create beautiful CSS box shadows with real-time preview. Adjust parameters and copy production-ready code.

Live Preview

Generated CSS

box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
background-color: #1149ee;

Position & Size

0px

Negative values move shadow left, positive values move right

0px

Negative values move shadow up, positive values move down

10px

Higher values create more blurred, softer shadows

0px

Positive values expand shadow, negative values contract it

Colors & Style

20%

0% is fully transparent, 100% is fully opaque

Creates an inner shadow

About Box Shadow Generator

What is Box Shadow?

Box shadow is a CSS property that adds shadow effects around an element's frame. It allows you to create depth and visual interest in your web designs by casting shadows behind elements.

How to Use This Tool

  • •Adjust the horizontal and vertical offsets to position your shadow
  • •Control the blur radius for soft or sharp shadows
  • •Use spread radius to expand or contract the shadow
  • •Customize colors and opacity for perfect styling
  • •Toggle inset for inner shadow effects

Shadow Properties Explained

Horizontal Offset
Moves shadow left (negative) or right (positive)
Vertical Offset
Moves shadow up (negative) or down (positive)
Blur Radius
Controls how blurred the shadow appears
Spread Radius
Expands (positive) or contracts (negative) the shadow