box-shadowプロパティでブロックの上部に影をつくる

shadow-box.scss

// @desc ブロック要素内の上部に影をつくります。
// e.g. scss
// .shadow {
//   @include shadow();
// }
//
// e.g. html
// <div class="shadow">
//   <img/>
// </div>
//
@mixin shadow($color: #000, $height: 10px, $blur: 20px, $spread: 0) {
  position: relative;
  overflow: hidden;
  &:before {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 100%;
    height: $height;
    box-shadow: 0 $height $blur $spread $color;
  }
}