box shadow at top and bottom - html

Question

I have the following box shadow with the effect attached. Right now the top of the element has the box shadow effect (see attached), but the bottom does not have the same effect.
How can I make it so that the bottom of the element looks exactly like the top of the element. (see attached for an image)
box-shadow: 0px 0px 60px -18px #CACACA;

Answer 1

Here is your shadow setting applied to a DIV that's 500px x 200px:
http://codepen.io/anon/pen/aNxWgE
If (in that codepen) you change margin: 100px auto; to margin: 0 auto;, you won't see the top shadow anymore. If you erase the width (thereby making the DIV 100% wide), you won't see the side shadows anymore. So probably something similar happens with your bottom shadow.
To avoid that, use margins which are at least as wide as the shadow.

Answer 2

We have not enough infos to tell you where you really go wrong but:
if shadow is too light and spread, you may not see it
when you downscale a shadow, you need enough height and width so it can be produced
body * {
box-shadow: 0px 0px 60px -18px #000;
background:white;
margin: 2em;
}
.minH {
min-height: 38px;
box-shadow: 0 0 60px -18px #000;/* black to make see it better */
}
.show {
float:left;
margin-left:2em;
height:60px;
width:60px;
/* even then , black blured on 60px doesn't show much;*/
}
.show + .show {
height:120px;
width:120px;
/* even then , black blured on 60px doesn't show much;
}
<hr/>
<p>hello</p>
<div></div>
<p class="minH">min-height is necessary to give room to draw box-shadow: here - 18px on each sides makes a min width and height of 18x2 =36px <b>But it will start to show at 37px if your eye can see it </b></p>
<p class="show">make bigger to show</p><p class="show">make twice bigger to show</p>
To understand through example what happens :
offset shadow far enough and without blur to see if it is there or not and how big it is (using black again)
hover the snippet to activate the blur effect and see what becomes the 60px - 18px black shadow.
body {
display: flex;
justify-content: space-around;
background: gold;
}
div {
box-sizing: border-box;
height: 20px;
width: 20px;
background: gray;
box-shadow: 0 65px 0 -18px;
}
div:nth-child(2) {
height: 36px;
width: 36px;
}
div:nth-child(3) {
height: 38px;
width: 38px;
}
div:nth-child(4) {
height: 60px;
width: 60px;
}
/* add blur on hover */
html:hover div {
box-shadow: 0 65px 60px -18px;
}
<div>20px</div>
<div>36px</div>
<div>38px</div>
<div>60px</div>