How to add box-shadow

Back in the day, shadow features weren't available in CSS. This feature gives you the opportunity to append the shadow effect to boxes (with box-shadow) and text (with text-shadow). How is box-shadow created? Let's check the parameters of this property in CSS:

box-shadow: horizontal-shadow vertical-shadow blur spread color

Before all parameters you can add inset. With this property shadow will be inside element.

The easiest way to understand this is to check how it behaves in the browser:

HTML:

<div class="container">
    <div class="box_container">
        <div class="box__bottom_right">bottom right</div>
    </div>
    <div class="box_container">
        <div class="box__bottom_left">bottom left</div>
    </div>
    <div class="box_container">
        <div class="box__top_right">top right</div>
    </div>
    <div class="box_container">
        <div class="box__top_left">top left...