Gradient Box Shadow

dabblet.css

/* Gradient Box Shadow */

body {
  font: 16px/24px Helvetica Neue, Helvetica, sans-serif;
  color: hsl(210, 8%, 55%);
  background-color: hsl(210,10%,95%);
  text-shadow: 0 1px 0 white;
  -webkit-font-smoothing: antialiased;
}

h1 {
  margin: 47px 0 0 0;
  text-align: center;
}

.box {
 position: relative;
 margin: 50px auto;
 padding-bottom: 48px;
 width: 800px;
}

.box:after {
 position: absolute;
 left: -10%;
 bottom: -15px;
 display: block;
 content: " ";
 width: 120%;
 height: 16px;
 background-image: radial-gradient(top, hsl(210,10%,87%), rgba(255,255,255,0));
}

dabblet.html

<h1>Subtle Gradient Shadow with CSS3</h1>

<p class="box">
  Mcsweeney's you probably haven't heard of them consequat, farm-to-table ullamco pinterest ad typewriter echo park banksy. Letterpress whatever umami, reprehenderit tofu excepteur ennui. Shoreditch labore put a bird on it, bicycle rights deserunt delectus authentic. Gentrify irure wolf bespoke +1. Sint etsy esse officia. Delectus 3 wolf moon food truck, vice gentrify brooklyn leggings small batch bespoke dolore. Hella nihil farm-to-table four loko, aesthetic ex banh mi iphone biodiesel keffiyeh brunch typewriter butcher bespoke.
</p>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}