Free CSS Box Shadow Generator — Multi-Layer, Live Preview

X offset moves the shadow left (negative) or right (positive). Y offset moves it up (negative) or down (positive). Blur radius controls softness: 0 = sharp hard edge, higher values = softer and more diffused. Spread radius expands (positive) or contracts (negative) the shadow size before blur is applied. Example: box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1) means no horizontal shift, 4px down, 12px blur, pulled in 2px, at 10% opacity — a typical subtle card elevation.

Material uses two shadow layers per elevation: a sharp key shadow (small blur, small Y offset) for direct light, and a soft ambient shadow (large blur, moderate Y offset) for diffused light. Use the Elevation preset as a starting point — it loads exactly this two-layer pattern. For higher elevations, increase Y offset and blur proportionally on both layers and slightly raise opacity.

When Inset is checked, the shadow appears inside the element instead of outside. This creates a pressed, sunken, or engraved look. Common uses: pressed button states, inset text fields, photo frames with an inner vignette, and neumorphic pressed elements. You can mix outset and inset layers in the same stack.

Neumorphism needs two layers with opposite-direction offsets: one light (white, low opacity, negative-X/negative-Y) for the highlighted side, one dark (black, low opacity, positive-X/positive-Y) for the shadow side. The element background must closely match the canvas background. Use the Inner preset for the inset (pressed) variant. Keep blur between 10–25px and opacity below 0.2 for the characteristic soft look.

Shadows are clipped by parent elements with overflow: hidden or overflow: auto. Set overflow: visible on the parent, or add enough padding/gap to the parent so the shadow fits within the visible area. If the parent must scroll, apply the shadow to a pseudo-element (::before/::after) positioned behind the content instead.

box-shadow always follows the rectangular box model (respecting border-radius). filter: drop-shadow follows the element's actual alpha channel — useful for PNGs with transparency or SVG shapes. box-shadow supports multiple layers and is faster for rectangles and rounded boxes. Use drop-shadow only when you need the shadow to match a non-rectangular visible shape.

Yes. Add transition: box-shadow 0.25s ease to your element and define a different box-shadow on :hover. Note that animating box-shadow triggers a paint operation on every frame, which can be expensive. For high-performance animations, consider animating the opacity of a pseudo-element that holds the elevated shadow, combined with transform: translateY for the lift illusion.