Each 70×46 white box carries one or more box-shadow layers. Offsets, blur, spread, color, inset, and multiple layers are exercised.
box down-right box-shadow: 6px 6px 0 #888 | box up-left (negative) box-shadow: -6px -6px 0 #888 | box straight down box-shadow: 0 6px 0 #b06 | box colored box-shadow: 5px 5px 0 #0a7 |
box soft, small (4px) box-shadow: 3px 3px 4px rgba(0,0,0,.4) | box soft, large (12px) box-shadow: 4px 4px 12px rgba(0,0,0,.5) | box ambient (no offset) box-shadow: 0 0 12px rgba(0,0,0,.55) | box lifted card box-shadow: 0 8px 16px rgba(20,40,80,.35) |
box solid ring (+6px) box-shadow: 0 0 0 6px #4a90d9 | box negative spread box-shadow: 6px 6px 6px -2px rgba(0,0,0,.6) | box glow (blur + spread) box-shadow: 0 0 10px 4px rgba(240,160,0,.7) | box halo box-shadow: 0 0 0 3px #f0a, 0 0 0 6px #a0f |
box inset vignette box-shadow: inset 0 0 14px rgba(0,0,0,.55) | box inset top-left box-shadow: inset 5px 5px 8px rgba(0,0,0,.45) | box inset ring box-shadow: inset 0 0 0 5px #4a90d9 | box pressed box-shadow: inset 0 3px 6px rgba(0,0,0,.4) |
The first-listed layer paints on top. box-shadow honors border-radius.
box two-tone box-shadow: 3px 3px 4px #d33, -3px -3px 4px #33d | box elevation stack box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.25) | box rounded + blur box-shadow: 5px 6px 10px rgba(0,0,0,.45) | box neumorphic box-shadow: 6px 6px 12px #b9c2cf, -6px -6px 12px #ffffff |