Объемная тень для элемента.

Как лаконичнее можно сделать тень для элемента, чтобы он выглядел объемным? На данный момент я создаю отдельный элемент .bottom-frame-shadow задаю ему background: $shadow-back; и верхнюю границу, что сделать его объемным border-top: 1px solid black;. Можно ли сделать это как-то удобнее с помощью html или css?

$width-panel: 200px;
$radius-border: 7px;
$shadow-back: #441DBF;
$border: 2px solid black;
body {
  background: #6839FF;
    .panel {
      width: $width-panel;
      height: 200px;
      margin: 150px auto;
      border: $border;
      border-radius: $radius-border;
      box-shadow: 0 5px 0 0 $shadow-back;
      .inner-panel {
        background: grey;
        margin: 10px;
        width: 175px;
        height: 170px;
        border: $border;
        border-radius: $radius-border;
    }
      .bottom-frame-shadow {
        margin-top: 0px;
        padding-top: 5.5px;
        width: $width-panel;
        border-top: 1px solid black;
        background: $shadow-back;
        border-radius: 0 0 7px 7px;
      }
  }
}

<div class='panel'>
  <div class='inner-panel'>
  </div>
  <div class='bottom-frame-shadow'>
  </div>
</div>

codepen