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