CSS3 Box shadow to half of the div

Question

I want to apply the box shadow to just half of the div. I searched a lot in Google but failed. Here is the code for simple box shadow.

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: gray;
        margin: auto;
        font-size: 30px;
        box-shadow: 0 100px 5px 5px;
    }
</style>

<div>Sometimes by losing a battle you find a new way to win the war.</div>

Coded:

Required:

Barrels of thanks in advance...

Answer 1

You could apply the box-shadow to its :after :pseudo-element to achieve this.

 div { width: 200px; height: 200px; text-align: center; background-color: gray; margin: auto; font-size: 30px; position: relative; } div:after { position: absolute; content: ''; width: 100%; height: 50%; /* Half of the original height */ top: 0; left:0; box-shadow: 0 100px 5px 5px; z-index: -1; } 

 <div>Sometimes by losing a battle you find a new way to win the war.</div> 

Answer 2

There is a way to do this using a second div to cover the shadow.

Here is a codepen: https://codepen.io/bstookey/pen/gEeovj

<div class="shadowContainer">
    <div class="shadow"></div>
    <div class="shadowContent">
        <div class="containerSmall">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac consequat ligula. Aliquam finibus risus a rutrum volutpat. Donec tempus iaculis maximus. Ut scelerisque tortor in semper dictum. Fusce ullamcorper risus eget diam fermentum ultrices. Maecenas pharetra pellentesque urna, bibendum volutpat justo. Aliquam egestas odio quis purus ornare sollicitudin.

Etiam mattis orci id ante vehicula vehicula. Sed consequat interdum orci aliquet dapibus. Proin pharetra luctus pharetra. Sed iaculis nibh nulla, eu consectetur libero vulputate at. Interdum et malesuada fames ac ante ipsum primis in faucibus. In eu risus justo. Aliquam egestas risus mi, sit amet vehicula nibh lobortis rhoncus. Nullam justo justo, faucibus tristique aliquam a, tristique imperdiet tellus. Nulla facilisi.

Proin mauris libero, blandit nec risus eget, efficitur laoreet magna. Donec nulla sapien, laoreet mattis sem eu, ultrices luctus turpis. Donec sed leo nec nibh dignissim placerat auctor at ante. Nunc faucibus sit amet libero et luctus. Pellentesque non nulla scelerisque, sollicitudin dolor posuere, blandit libero. Donec ullamcorper leo eget semper egestas. Phasellus pharetra lacus sapien, at sagittis libero molestie sit amet. In sodales neque sit amet blandit aliquet. Proin vitae dolor nisi. Nunc aliquam felis aliquam, ornare neque luctus, blandit neque.
        </div>
    </div>
    <div class="shadowCover"></div>
</div>