SimOpção 1
Opção usando a sombra em um elemento ::after
, um rotateX()
para inclinar a sombra e um filter:blur
para fazer o elemento ficar com aspecto de sombreado.
#slider{
width: 950px;
height: 350px;
position: relative;
perspective: 300px;
}
#slider::after{
content: "";
position: absolute;
width: 950px;
height: 350px;
background: blue;
top: 0;
left: 0;
z-index: 1;
}
#slider::before{
content: "";
background: rgba(0, 0, 0, 0.5);
width: 90%;
height: 40px;
position: absolute;
bottom: -20px;
right: 0;
left: 0;
margin: auto;
border-radius: 5px;
filter: blur(5px);
z-index: -1;
transform: rotateX(45deg);
}
<div id="slider"></div>
Opção 2
Também é possível usando um valor negativo para o quarto atributo do Box-shadow (o qurto valor é conhecido como o spread
). https://developer.mozilla.org/pt-BR/docs/Web/CSS/box-shadow
Vc pode ir ajustando esse valores até chegar em um que mais te agrade, mas lembre-se que o quarto valor sempre deve ser negativo para ter o efeito que vc quer
#slider{
width: 950px;
height: 350px;
background: blue;
position: relative;
box-shadow: 0 40px 20px -20px rgba(0, 0, 0, 0.5);
}
<div id="slider"></div>