Skip to main content
inclui novas informações
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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>

Sim é 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>

Opçã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>

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Sim é 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>