box_shadow_single_edge

by ryansukale

HTML

<div class="box shadow-top"> Top </div>
<div class="box shadow-right"> Right </div>
<div class="box shadow-bottom"> Bottom </div>
<div class="box shadow-left"> Left </div>
<div class="box shadow-vertical"> Top and Bottom - i.e. Vertical </div>
<div class="box shadow-horizontal"> Left and Right - i.e. Horizontal </div>

SCSS

.box {
  height: 100px;
  width: 300px;
  margin: 20px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 100px;
}
      
.shadow {
  &-top {
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 -5px 5px -5px black;
  }

  &-right {
    box-shadow: 5px 0 5px -5px black;
  }

  &-bottom {
    box-shadow: 0 5px 5px -5px black;
  }
  
  &-left {
    box-shadow: -5px 0 5px -5px black;
  }
  
  &-vertical {
    box-shadow: 0px 5px 5px -5px black, 0px -5px 5px -5px black;
  }
  
  &-horizontal {
    box-shadow: 5px 0px 5px -5px black, -5px 0px 5px -5px black;
  }
}