📖 CSS Box-Shadow Properties

box-shadow: offset-x offset-y blur-radius spread-radius color [inset];

offset-x — horizontal offset. Positive = right, negative = left.

offset-y — vertical offset. Positive = down, negative = up.

blur-radius — the larger the value, the bigger and softer the blur. 0 = sharp shadow.

spread-radius — expands or shrinks the shadow. Positive values expand outward, negative shrink inward.

inset — optional keyword that changes the shadow from an outer shadow (outset) to an inner shadow.

You can layer multiple shadows by comma-separating values: box-shadow: 0 4px 6px rgba(0,0,0,.1), 0 10px 30px rgba(0,0,0,.08);

Stacked shadows for realistic depth. A single shadow looks flat. Professional UI design uses 2–5 stacked shadows at different offsets and blur radii to simulate the way light falls on physical objects. The standard pattern: a tight shadow with low blur for the contact edge (0 1px 2px), a medium shadow for the main occlusion (0 4px 8px), and a large soft shadow for ambient occlusion (0 12px 24px). This three-layer technique is what Material Design calls 'elevation' — each shadow layer contributes to the perception of the element floating at a specific height above the surface. Use rgba() or hsla() colors with alpha channels (opacity 0.05–0.20) so shadows composite naturally against any background color.

box-shadow vs drop-shadow — when to use which. box-shadow follows the element's border box — a rounded rectangle, always. filter: drop-shadow() follows the element's alpha channel — it casts a shadow of the actual visible shape, including transparent PNG cutouts, CSS clip-path shapes, and SVG outlines. For a circular avatar image, box-shadow on a border-radius:50% container works fine. For an irregular SVG icon, filter:drop-shadow() produces the correct outline. Performance note: box-shadow is GPU-composited in modern browsers and is cheap to animate (changing shadow values triggers compositing, not layout). Filter:drop-shadow() is more expensive — it triggers a filter pass on every frame. For static design, either is fine. For animation or scroll-heavy pages, use box-shadow and avoid animated filters.

Inset shadows for depth reversal. The inset keyword flips the shadow inside the element — it draws on the inner edge instead of the outer. This creates a 'pressed' or 'carved' look. Combined with a subtle background gradient, inset box-shadow can simulate engraved text fields, sunken wells, or toggle-switch tracks. A common pattern: flat cards use box-shadow: 0 2px 8px rgba(0,0,0,.12) for resting elevation, then switch to box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06) on active/pressed state. This gives the illusion the element has been pushed into the surface.