Box Shadow Generator
Create beautiful CSS box-shadows with live preview
Shadow Controls
Adjust the values for each shadow layer
Shadow 1
Preview
Live preview of your box-shadow
Preview Box
100 × 100
box-shadow: 4px 4px 10px 0px #00000040;Presets
Quick-start with popular shadow styles
Tips
box-shadow syntax:
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
- inset: Shadow inside the element (optional)
- offset-x: Horizontal offset (required)
- offset-y: Vertical offset (required)
- blur-radius: Blur amount (default: 0)
- spread-radius: Size increase/decrease (default: 0)
- color: Shadow color (default: text color)