Box Shadow Generator
Build CSS box shadows visually with sliders. Layer multiple shadows and copy the generated code — everything runs in your browser.
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.20);
box-shadow Syntax
The CSS box-shadow property takes a comma-separated list of shadow definitions. Each shadow is defined by:
- offset-x — horizontal distance (negative = left)
- offset-y — vertical distance (negative = up)
- blur-radius — softness (0 = sharp edge)
- spread-radius — size expansion (negative = smaller)
- color — any valid CSS color including rgba
- inset — optional keyword to create an inner shadow
Layering Shadows
Multiple shadows are comma-separated and rendered in order — the first shadow in the list is drawn on top. Layering is a key technique:
- A sharp nearby shadow + a soft distant shadow = realistic depth
- Combine normal + inset shadows for pressed-button effects
- Stack low-opacity shadows for a glow effect
- Negative spread with zero offset = tight, focused shadow
Performance Tips
box-shadowis GPU-composited in browsers — animating it is generally smooth, but preferfilter: drop-shadow()for non-rectangular shapes- Avoid very large blur radii on frequently repainted elements
- Use
will-change: box-shadowsparingly — only if you measure a real paint bottleneck box-shadowdoes not affect layout — useoutlineinstead if you want focus indicators that don't shift content
Frequently Asked Questions
What is the difference between box-shadow and drop-shadow?
box-shadow follows the rectangular box model of the element regardless of its content. filter: drop-shadow() follows the actual alpha channel — so it works correctly with transparent PNGs and irregular shapes, but has slightly different performance characteristics.
Does box-shadow affect layout or take up space?
No — box-shadow is purely visual and does not affect layout. Shadows are rendered outside the box model, so they never push other elements or add to the element's dimensions. Use spread-radius to expand the shadow without affecting layout.
How do I create a one-sided shadow?
Offset in one direction and use negative spread to trim the other sides. For example, a bottom-only shadow: 0px 4px 6px -4px rgba(0,0,0,0.3) — positive y-offset pushes it down, negative spread pulls in the sides.
Can I animate box-shadow?
Yes — box-shadow is animatable via CSS transitions and keyframes. However, for performance, a common trick is to animate opacity on a pseudo-element with the shadow pre-defined, avoiding layout recalculation on every frame.