The CSS box-shadow property adds a shadow to an element’s box, creating visual depth or separation. Its values control horizontal and vertical offset, blur, spread, and color; adding inset turns the shadow inward. section 8.2.6 section 9.7
Floating checkout cards
Give a section a white surface, rounded corners, and a soft shadow against a pale teal page background: section { background: #ffffff; border-radius: 4px; box-shadow: 2px 2px 7px #aeb7b7; }. This makes the section read as a card hovering above the page. section 8.2.6
Use box-shadow when you need to:
- Separate containers visually without adding a heavy outline. section 8.2.6
- Reinforce a three-dimensional floating-card effect with a large, soft, transparent shadow: box-shadow: 0 20px 60px 0 rgb(14 42 90 / 0.55);. section 9.7.1
- Create an inward shadow by including the optional inset value. section 8.2.6
Unlike filter: drop-shadow(), box-shadow follows the element’s outer bounding box. A drop shadow can follow an image’s alpha mask, so transparent areas in PNG or SVG artwork affect its shape; use box-shadow when the rectangular container is the intended target. section 9.7.1
