Your data is never sent to a server or stored anywhere. All processing happens in your browser.

CSS Box Shadow Generator

Horizontal Offset 4px
Vertical Offset 4px
Blur Radius 10px
Spread Radius 0px
Opacity 25%
Preview
CSS Output
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

How to Use

  1. Adjust horizontal and vertical offset to position the shadow.
  2. Set blur radius for softness and spread radius for size.
  3. Pick a color and adjust opacity for the shadow.
  4. Toggle inset for inner shadows.
  5. Copy the generated CSS with the copy button.

CSS Box Shadow

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects including the offset, blur radius, spread radius, color, and whether the shadow is inset. It is commonly used for cards, buttons, modals, and any element that needs visual depth or elevation.

Value Reference

  • Horizontal offset: Positive values move the shadow right; negative values move it left.
  • Vertical offset: Positive values move the shadow down; negative values move it up.
  • Blur radius: Higher values create a softer, more diffused shadow. 0 means a sharp edge.
  • Spread radius: Positive values expand the shadow; negative values shrink it.
  • Inset: Moves the shadow inside the element, creating a pressed or recessed look.

Privacy

All processing happens in your browser. No data is sent to any server.