Adds a shadowy border on top of the element using the :before pseudo element, you may apply the last three lines directly to the element itself if you dont need additional background on the same element.

mixin.scss

@mixin shadow-border-top($size: 10px) {
    &:before {
        content: "";
        width: 100%;
        height: $size;
        display: block;
        top: 0;
        position: absolute;
        background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.09) 75%, white 88%, white 100%) no-repeat;
        background-position: 0 -$size / 2;
        background-size: 100% $size;
    }
}

@mixin shadow-border-bottom($size: 10px) {
    &:after {
        content: "";
        width: 100%;
        height: $size;
        display: block;
        bottom: 0;
        position: absolute;
        background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.09) 75%, white 88%, white 100%) no-repeat;
        background-position: 0 $size / 2;
        background-size: 100% $size;
    }
}