Responsive box shadow From http://devblog.xing.com/frontend/a-flexible-shadow-with-background-size/

box_shadow.css

.shadow:after,
.shadow-gray:after {
  bottom: -7px;
  content: ".";
  height: 6px;
  position: absolute;
  text-indent: -9999px;
  width: 100%;
 
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:    -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:     -ms-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:      -o-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
}
 
.shadow-gray:after {
  background-image: -webkit-linear-gradient(left, rgba(205,205,205,1), rgba(205,205,205,0), rgba(205,205,205,1));
  background-image:    -moz-linear-gradient(left, rgba(205,205,205,1), rgba(205,205,205,0), rgba(205,205,205,1));
  background-image:     -ms-linear-gradient(left, rgba(205,205,205,1), rgba(205,205,205,0), rgba(205,205,205,1));
  background-image:      -o-linear-gradient(left, rgba(205,205,205,1), rgba(205,205,205,0), rgba(205,205,205,1));
}
 
.shadow:before,
.shadow-gray:before {
  bottom: -6px;
  content: ".";
  height: 6px;
  position: absolute;
  text-indent: -9999px;
  width: 100%;
 
  background-image: -webkit-linear-gradient(top, rgba(150,150,150,1), rgba(150,150,150,0));
  background-image:    -moz-linear-gradient(top, rgba(150,150,150,1), rgba(150,150,150,0));
  background-image:     -ms-linear-gradient(top, rgba(150,150,150,1), rgba(150,150,150,0));
  background-image:      -o-linear-gradient(top, rgba(150,150,150,1), rgba(150,150,150,0));
}