CSS Shadow Generator
Box-Shadow Syntax Reference
The CSS box-shadow property adds one or more shadow effects to an element. Syntax:
Property Breakdown
| Value | Description | Default |
|---|---|---|
offset-x | Horizontal offset. Positive = right, negative = left | Required |
offset-y | Vertical offset. Positive = down, negative = up | Required |
blur-radius | Blur radius. Larger = softer, more diffused shadow | 0 |
spread-radius | Spread radius. Positive = expand, negative = shrink | 0 |
color | Shadow color, supports rgba() for transparency | Text color |
inset | Changes outer shadow to inner. Used for pressed effects | None (outer) |
Browser Compatibility
box-shadow has full support in all modern browsers (Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+). For legacy WebKit browser support, add the -webkit-box-shadow prefix. Most modern projects no longer need it.
Performance Tips
- Use
will-change: box-shadowon animated shadow elements to hint the browser for optimization - Large blur values (> 50px) are GPU-intensive; use cautiously on mobile devices
- Multiple shadow layers compound performance cost; keep layers under 3 for best performance
- For static shadows, consider using pseudo-elements with images instead of rendered shadows
FAQ
What is the difference between box-shadow and drop-shadow?
box-shadow follows the element's rectangular box model. filter: drop-shadow() follows the element's actual visible shape including alpha transparency, making it ideal for PNG icons and irregular shapes.
How do I create multi-layered shadows?
Separate multiple shadow values with commas: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1); The first layer renders on top. Multiple soft layers produce more realistic lighting than a single hard shadow.
Does box-shadow affect page layout?
No. box-shadow is purely visual โ it does not affect document flow, element dimensions, or adjacent element positions. However, large shadow spread may overflow the parent container's visible area (clip with overflow:hidden).
How can I show shadow on only one side?
Combine offset with negative spread to create single-direction shadows. For bottom-only: box-shadow: 0 4px 6px -2px rgba(0,0,0,.2); Negative spread shrinks the shadow while positive y-offset pushes it downward.