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>