CSS Perspective shadow

dabblet.css

/**
 * CSS Perspective shadow
 */
.wrapper {
  margin: 2em auto;
  max-width: 960px;
}

.box {
  background: #444;
  color: #FFF;
  height: 320px;
  position: relative;
}

.box:after {
  bottom: -100%;
  content: '\00A0';
  display: block;
  left: -64px;
  position: absolute;
  right: -64px;
  top: 100%;
  z-index: -1;
  
  margin-top: -10000px;
  background: black;
  box-shadow: inset 0 0 64px 64px #ffffff;
  transform: translateY(10000px) perspective(960px) rotateX(-96.25deg);
  transform-origin: 50% 16px;
}

dabblet.html

  <div class="wrapper">
    <div class="box"></div>
  </div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}