Add box shadow to upper 50% of a div [duplicate] - html

Question

This question already has answers here:
CSS3 Box shadow to half of the div
(2 answers)
Closed 6 years ago.
I want to apply the box shadow to the upper half (upper 50%) of the div. I have tried everything but failed.
div{
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
box-shadow: 0px 0px 5px 5px;
}
Like mentioned: I want to add the box shadow to just the upper half of the div.
<div>Some text.</div>

Answer 1

You can use pseudo-element to add box-shadow and make that pseudo-element 50% of height of parent div. Also you need to set z-index: -1 so that pseudo-element appears under div.
div {
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
position: relative;
}
div:after {
content: '';
z-index: -1;
position: absolute;
left: 0;
height: 50%;
width: 100%;
box-shadow: 0px 0px 5px 5px;
top: 0;
}
<div>Some text.</div>

Answer 2

div{
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
border: none;
border-style: outset;
border-width: 5px 5px 0 0;
border-top-left-radius: 5px;
border-top-color: #6f6f6f;
border-bottom-right-radius: 5px;
border-right-color: #0e0e0e;
box-shadow: inset -2px -14px 47px 1px rgba(56,12,12,0.3);
}
<div>Box</div>
Try this.
border: none;
border-style: outset;
border-width: 5px 5px 0 0;
border-top-left-radius: 5px;
border-top-color: #6f6f6f;
border-bottom-right-radius: 5px;
border-right-color: #0e0e0e;
box-shadow: inset -2px -14px 47px 1px rgba(56,12,12,0.3);