La propiedad box-shadow de CSS permite añadir sombras externas (y también internas con inset) a cualquier elemento HTML, como div, botones, tarjetas, imágenes, etc. Es muy útil para dar profundidad visual, mejorar el diseño y dirigir la atención del usuario.
Puedes personalizar la sombra con parámetros como el desplazamiento horizontal, vertical, desenfoque, expansión y color.
A continuación, te mostramos un ejemplo práctico de cómo aplicar una sombra básica a un div, compatible con todos los navegadores modernos.
.sombra {
box-shadow: 3px 3px 5px 6px #ccc;
}<div class="sombra">Texto</div>