I have a div of 950x350 pixels and would like to create a perspective (and blurred) shadow as shown in the code below (run in full screen):
#slider{
width: 950px;
height: 350px;
background: blue;
position: relative;
}
#slider img{
width: 962px;
height: 31px;
position: absolute;
left: -6px;
bottom: 0px;
}
<div id="slider">
<img src="https://i.stack.imgur.com/OGKsw.png">
</div>
I created an image in Photoshop and put it below the div, but I would not use an image for it, it would be 1 requisition less. Is it possible and how do I get this effect using HTML / CSS?