La documentación necesaria la encuentras en Box-shadow
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
Hay una caja por detrás;
- offset-x: la mueve horizontalmente
- offset-y: la mueve verticalmente
- blur-radius: hace que el borde se vea borroso gradualmente
- spread-radius: el radio adicional de la caja de atrás
puedes probar en el siguiente snippet:
:root {
--offset-x: 0px;
--offset-y: 10px;
--blur-radius: 15px;
--spread-radius: 0px;
}
.card {
border: 1px solid transparent;
border-radius: 5px;
box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) rgba(0, 0, 0, .5);
padding: 2rem;
display: flex;
flex-direction: column;
width: 40%;
}
<div style="text-align: -webkit-center;margin-top: 5rem;"><div id="card" class="card">hola</div></div>
offset-x<input id="offset-x" type="range" onchange="document.documentElement.style.setProperty('--offset-x', (this.value-50+'px'))"><br>
offset-y<input id="offset-y" type="range" onchange="document.documentElement.style.setProperty('--offset-y', (this.value-50+'px'))"><br>
blur-radius<input id="blur-radius" type="range" onchange="document.documentElement.style.setProperty('--blur-radius', (this.value+'px'))"><br>
spread-radius<input id="spread-radius" type="range" onchange="document.documentElement.style.setProperty('--spread-radius', (this.value+'px'))"><br>
En particular el de la imagen que compartes está como 10 pixeles más abajo y el borde un poco borroso, entonces: box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2);