Text Shadow

text-shadow property applies shadow to text.

<div class="row">
    <div class="col-4">
        <h4>Text Shadow</h4>
    </div>
    <div class="col-8" id="textShadow">
        Hi my name is Folau
    </div>
</div>
<style>
            #textShadow{
                /* 
                text-shadow: h-shadow v-shadow blur-radius color 

                h-shadow - The position of the horizontal shadow
                v-shadow - The position of the vertical shadow.
                blur-radius - The blur radius. Default value is 0
                color - color
                */
                text-shadow: 2px 2px 8px #FF0000;
            }
</style>

Text Multiple Shadows

<div class="row">
    <div class="col-4">
        <h4>Text Multiple Shadow</h4>
    </div>
    <div class="col-8" id="textMultipleShadow">
        Hi my name is Folau
    </div>
</div>
<style>
            #textMultipleShadow{
                color: white;
                text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
            }
</style>

Box Shadow

box-shadow property applies shadow to elements.

<div class="row">
    <div class="col-4">
        <h4>Box Shadow</h4>
    </div>
    <div class="col-8" id="boxShadow">
        Hi my name is Folau
    </div>
</div>
<style>
            #boxShadow{
                /*
                box-shadow: none(no shadow)
                box-shadow: h-offset v-offset blur spread color

                h-offset - The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
                v-offset - The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
                blur - The blur radius. The higher the number, the more blurred the shadow will be
                spread - The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
                color - color
                */
                box-shadow: 10px 10px 8px 10px #888888;
            }
</style>

Box Multiple Shadows

<div class="row">
    <div class="col-4">
        <h4>Box Multiple Shadow</h4>
    </div>
    <div class="col-8" id="boxMultipleShadow">
        <img src="superman.jpeg" alt=""  style="width:100%;padding: 10px 30px;"/>
        <div class="profile">
            Hi my name is Folau
        </div>
    </div>
</div>
<style>
    #boxMultipleShadow{
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                text-align: center;
            }
        </style>

Source code on Github