Box Shadow CSS Generator

Visually generate and preview CSS box-shadow properties.

Shadow Settings
Adjust the sliders to customize the shadow effect

Shadow 1

Presets
Try predefined shadow styles
Preview
See the generated shadow effect
Preview
Generated CSS
box-shadow: 0px 4px 6px 0px #00000040;
Box Shadow Property Reference

Property Descriptions

  • X Offset: Horizontal position of the shadow (positive: right, negative: left)
  • Y Offset: Vertical position of the shadow (positive: bottom, negative: top)
  • Blur: Blur radius of the shadow (0: sharp, larger values more blurred)
  • Spread: Size of the shadow (positive: expand, negative: shrink)
  • Color: Color of the shadow (HEX, RGB, RGBA, etc.)
  • Inset: Whether the shadow is an inner shadow
    Box Shadow CSS Generator | toolsmoah