CSS :before, :after 그림자 효과가 적용되지 않아요

변형된 그림자 효과를 확인하려고 간단한 코드를 만들었는데, z-index를 빼면 그림자가 기울어진 형태로 보여요.
그림자만 뒤로 숨기려고 z-index를 적용하면 전부 보이지 않습니다. 빠뜨린 부분이 있는지 모르겠네요.
크롬에서 테스트 중인데 조언 부탁드립니다.

코드:
body > div.wrapper > div.box

.box { position: relative; width: 300px; height: 80px; background: #f6769a; margin: 0 auto; }
.box:before { z-index: -1; position: absolute; content: ''; bottom: 10px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; box-shadow: 0 15px 10px #777; transform: rotate(-3deg); }