# box-shadow-side()

The mixin includes the `box-shadow` of the specified side, size, and color. The side can be \`bottom\`, \`left\`, \`right\`, \`top\`, size default is `10px` and color default is `gray-color`.

{% code title="" lineNumbers="true" %}

```scss
// 
@mixin box-shadow-side($side, $size: 10px, $color: 'gray') {
  @if $side == right {
    // Right side.
    box-shadow: $size 0 $size ($size * -1) color($color);
  } @else if $side == left {
    // Left side.
    box-shadow: ($size * -1) 0 $size ($size * -1) color($color);
  } @else if $side == bottom {
    // Bottom side.
    box-shadow: 0 $size $size ($size * -1) color($color);
  } @else if $side == top {
    // Top side.
    box-shadow: 0 ($size * -1) $size ($size * -1) color($color);
  } @else {
    @error "Unknown side #{$side}.";
  }
}
```

{% endcode %}