how to add box shadow to half of its height

Question

I am trying add shadow to a div. shadow should be at top and half of its height from top ( to both left and right side), someone please help me.

.test {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: solid 1px red;
  position: relative;
  background-color: white;
}

Answer 1

you can increase offset and reduce size of box shadow and draw 2 of them.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

/* offset-x | offset-y | blur-radius | spread-radius | color */

<spread-radius>

This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

#test {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: solid 1px red;
  position: relative;
  background-color: white;
  box-shadow: -50px -50px 5px -50px, 50px -50px 5px -50px
}

<div id="test"></div>

Answer 2

This could be a simple way to do it, quite a few possibilities.

.parent{
  width: 200px;
  height: 200px;
  margin: 10px;
  position: relative;
}

.test {
  z-index: 2;
  width: 100%;
  position: relative;
  height: 100%;
  border: solid 1px red;
  background-color: white;
}

.halfshadow{
  position: absolute;
  width: 100%;
  top: 0;
  height: 50%;
  box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}

<div class="parent">
  <div class="test"></div>
  <div class="halfshadow"></div>
</div>