Box Shadow Generator
Web & SEO Tools
Generate CSS box shadows
Preview
box-shadow: 0px 4px 6px 0px #0000001a;How to Use
- 1. Use the sliders to adjust the shadow parameters
- 2. Choose a shadow color and opacity
- 3. Toggle "inset" for inner shadows
- 4. Use presets for common shadow styles
- 5. Copy the CSS property to use in your project
Example / Use Case
Create Card Shadow Effect
A UI designer needs to add a subtle, modern shadow to card components in their design system.
Input
X-offset: 0 | Y-offset: 4px | Blur: 6px | Spread: -1px | Color: rgba(0,0,0,0.1)
Output
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
How It Works
CSS box-shadow adds shadow effects around an element's frame. The syntax: box-shadow: h-offset v-offset blur spread color inset. Positive h-offset moves shadow right, negative moves left. Positive v-offset moves down, negative moves up. Blur (required, no negative) controls softness - higher values = more blur. Spread (can be negative) expands/shrinks shadow before blurring. Color uses rgba for transparency control. Multiple shadows can be layered with comma separation. Inset shadows appear inside the element. Popular shadow patterns: Material Design uses layered shadows with increasing blur and spread. For button styling, combine with our CSS Button Generator.
How to Use
- 1Adjust the X-offset (horizontal position) of the shadow
- 2Set the Y-offset (vertical position) of the shadow
- 3Control blur radius for soft or sharp shadows
- 4Set spread radius to expand or contract shadow size
- 5Choose shadow color and opacity
- 6Toggle inset option for inner shadows
- 7Copy the generated CSS code
Frequently Asked Questions
box-shadow: offset-x offset-y blur-radius spread-radius color inset. For example: 0 4px 6px rgba(0,0,0,0.1)