← Back to All Tools

Box Shadow Generator

Visually create CSS box-shadows and copy the code instantly.

🚀 We are constantly adding new apps!

Have a tool you need? Drop your email and suggestion below.

Horizontal Offset10px
Vertical Offset10px
Blur Radius20px
Spread Radius0px
Settings
Shadow Opacity0.25
Preview
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.25);

How CSS Box Shadows Work

The box-shadow property allows you to add shadow effects around an element's frame. You can specify multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

Property Breakdown

  • Horizontal Offset (x): Positive values put the shadow on the right side of the box, negative values on the left.
  • Vertical Offset (y): Positive values put the shadow below the box, negative values above.
  • Blur Radius: The higher the number, the more blurred the shadow will be.
  • Spread Radius: Positive values increase the size of the shadow, negative values decrease it.
  • Inset: Changes the shadow from an outer shadow (default) to an inner shadow.