Bent paper effect with shrinking shadows

Using a negative spread radius value you can imitate the shadow of a bent paper.

I'm a big fan of negative values in CSS properties. They remind me of thinking out the box from time to time. This is one of those times.

Just using a negative length in the spread-radius value of the box-shadow CSS property you can make the shadow to shrink. The negative radius, in addition to high blur values and a soft, almost transparent grey creates this subtle bending paper effect.

#test {
  width: 90%;
  height: 300px;
  box-shadow: 0 45px 30px -46px rgba(128,128,128, 0.8),
              0 0 40px 0 rgba(200,200,200,0.2);
  margin: 2rem auto;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/3b/Pink_Floyd_logo.svg');
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: center;
}

I used this trick to frame talks and sponsors in the Web Games Day site.