How more concisely can you make a shadow for an element so that it looks voluminous? At the moment I am creating a separate element .bottom-frame-shadow ask it background: $shadow-back; and the upper border, which make it voluminous border-top: 1px solid black; . Is it possible to make it somehow more convenient using html or 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> 