Tenho uma div de 950x350 pixels e gostaria de criar uma sombra em perspectiva (e desfocada) como mostrado no código abaixo (execute em tela cheia):
#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.sstatic.net/OGKsw.png">
</div>
Fiz criando uma imagem no Photoshop e colocando-a abaixo da div, porém gostaria de não usar imagem pra isso, seria 1 requisição a menos. É possível e como obter esse efeito usando HTML/CSS?