Adding a box-shadow blur to only one side of an element - html

Question

Is it possible to add a blur to only one side of a div using box-shadow?
What I am trying to achieve is a shadow with no width, just blur on only one side of a div. In my example I try to apply it to the bottom but the side really shouldn't matter.
I tried have using box-shadow: 0px 5px 5px -5px #000000; however using this method the shadow does not cover the whole length on the bottom of the div.
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box {
width: 100%;
height: 100%;
box-shadow: 0px 5px 5px -5px #000000;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
Only HTML and CSS solutions please.

Answer 1

You could use an after element and stretch it a little:
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box:after {
content:'';
display:block;
position:absolute;
z-index:0;
top:0;
left:-4px;
right:-4px;
bottom:0;
box-shadow: 0px 5px 5px -5px #000000;
}
#box {
width: 100%;
height: 100%;
position:relative;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>

Answer 2

try this for bottom positioned box-shadow
.your_class {
box-shadow: 0 8px 6px -6px black;
}
You can also read https://developer.mozilla.org/en/docs/Web/CSS/box-shadow to understand how the box-shadow works

Answer 3

#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box {
width: 100%;
height: 100%;
border-bottom: 2px solid #ccc;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>

Answer 4

There is no readily available way to do precisely what you seek, at least not using a single box-shadow. Remember, the CSS box-shadow property accepts multiple comma-delimited entries, so this is your best bet if you're committed to using them. In the example below, I'm simply using two copies of the same box-shadow value with one difference: I've offset the first horizontally toward the left by 2.5px and the other toward the right by positive 2.5px. Additionally, I've added opacity to the color (due to mitigate the darkening effect of overlapping shadows).
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #EEE;
}
#box {
width: 100%;
height: 100%;
box-shadow: -2.5px 5px 5px -3px rgba(0, 0, 0, 0.50),
2.5px 5px 5px -3px rgba(0, 0, 0, 0.5);
background-color: Yellow;
}
<div id="bg">
<div id="box"></div>
</div>

Answer 5

Try this
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box:after {
content:'';
display:block;
position:absolute;
z-index:0;
bottom:0px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #9C9C9C),
color-stop(0.22, #EEEEEE)
);
background-image: -o-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -moz-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -webkit-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -ms-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: linear-gradient(to bottom, #9C9C9C 0%, #EEEEEE 22%);
height:10px;
width:100%;
}
#box {
width: 100%;
height: 100%;
position:relative;
background: yellow;
}
https://jsfiddle.net/Lfa4z5b4/