I'm having trouble adding depth to a header div using CSS box-shadow. No matter what I try, all I get is a flat line instead of the desired shadow effect. I've experimented with different colors, but nothing seems to work. Any suggestions on how to fix this issue?
Image:
HTML:
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
......
</div>
</div>
<div id="slider-wrapper">
<div id="slider">
.....
</div>
</div>
</div>
CSS:
div#wrapper {
position: relative;
}
div#header-wrapper {
z-index: 1;
height: 125px;
min-width: 100%;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f0f0f0));
background-image: -webkit-linear-gradient(top, #ffffff, #f0f0f0);
background-image: -moz-linear-gradient(top, #ffffff, #f0f0f0);
background-image: -ms-linear-gradient(top, #ffffff, #f0f0f0);
background-image: -o-linear-gradient(top, #ffffff, #f0f0f0);
box-shadow: 0px 5px 5px 5px #c6c6c6;
}
div#slider-wrapper {
margin-top: 5px;
z-index: -1;
min-width: 100%;
background-color: #f6f6f6;
}