← TechnologyThe essentials of

box-shadow: shadows do not take up layout space

Publisher: ResumeMaker • 1 source

Published: 22 Oct 2026 13:13 · Updated: 22 Oct 2026 13:13

AI source check: 21 Oct 2026 13:48. This is not editorial approval.

In a few sentences

In brief

The shadow is drawn around the box without distancing the adjacent elements.

Useful to know

box-shadow adds one or more shadows to the box. Displacement, blur, and expansion determine their appearance, but the shadow does not increase the space the element occupies in the arrangement. [1]

In box-shadow: 0 4px 12px #0003;, a card can visually enter its neighbor's space. If real distance is required, set gap or margin separately . inset moves the shadow inwards. In a few shadows, the first in the list is at the top; this is important when a thin decorative line should remain visible.

Sources

For further detail and to check the information:

  1. [1] MDN — box-shadow ↗