remove box shadow from only top of div? - css

Question

I am trying to add a box shadow to my div but i only want the shadow to appear on the left, right and bottom of the div, does anyone know or can show me how i might remove only the top shadow from my div?
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

Answer 1

The basic Box-shadow values are:
box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]
So for example:
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
would just be a shadow with no offset
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
would be a shadow with 5px vertical offset, effectively pushing the shadow down, like so:
http://jsfiddle.net/TLQs9/

Answer 2

Rather than add an extra div to your markup, you can use :before to cover up the box-shadow with absolute positioning and negative margin.
div {
position: relative;
background-color: white;
box-shadow: 0 7px 20px 0 rgba(0,0,0,.4);
}
p {
padding: 20px;
}
div:before {
content: "";
height: 7px;
width: 100%;
position: absolute;
top: -7px;
background: inherit;
z-index: 2;
}
<div><p>Some container with shadow</p></div>

Answer 3

As of November 2022 there's a nice, clean way to do this using the CSS clip-path property.
div {
box-shadow: 0 0 10px black;
clip-path: inset(0px -10px -10px -10px);
}
Inset will clip away the element from the top, right, bottom, and left edges. For a this shadow in the example we're clipping anything beyond the top bounds, hiding the shadow on the top, and allowing 10px of space for the shadow on all other sides.
It's the clean, ideal solution to the problem in my opinion. Browser support is good, but if you want support in IE11 still you'll want to explore the polygon option instead of inset.

Answer 4

You can try this:
div {
-moz-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}
The first value is horizontal position.
Second value is Vertical position.
Third value applies blur in shadow.
Four value spread.
So try that your vertical an horizontal position match with blur and spread

Answer 5

Try this:
div{
box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
}
When I use this I have a shadow on all sides except the top. You can change the values and it still works. Just don't add a fourth value and you'll be fine.

Answer 6

Try This :
div
{
box-shadow: 0px 9px 29px rgb(102, 102, 102);
-webkit-box-shadow: 0px 9px 29px rgb(102, 102, 102);
-moz-box-shadow:0px 9px 29px rgb(102, 102, 102);
}
See in jsfiddle
See More 1
See More 2

Answer 7

None of the answers above worked for me. So as an alternative solution I used a patch. Inside the element/div with the box shadow.
Place a second div, width 100% and its background the same color as the main div, then position it to cover over the box-shadow, like so.
background-color: your background color?
width:100%;
position:absolute;
height 15px;
left 0;
top -10px;
You may need to tweek the height to patch over the box shadow. But it does work.
plus this trick could be used for any side.