CSS3 Box shadow to half of the div

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>

Tags:

Html

Css

Related