Sombras CSS

Las sombras en CSS aportan profundidad visual a los elementos. La propiedad box-shadow se aplica a cajas y text-shadow a textos. Con ellas se puede resaltar contenido y crear diseños atractivos.

Ejemplo simple de box-shadow

En este ejemplo, se añade una sombra a un cuadro, desplazada hacia la derecha y abajo, ligeramente difuminada. El color es negro translúcido.

El ejemplo muestra el uso básico de la propiedad box-shadow.

Sintaxis de box-shadow

Box-shadow se compone de varios parámetros: desplazamiento horizontal y vertical, desenfoque, extensión y color. Combinándolos se obtienen distintos efectos.

Parámetro	Descripción
h-offset	El desplazamiento horizontal de la sombra.
v-offset	El desplazamiento vertical de la sombra.
blur-radius	El radio de desenfoque de la sombra.
spread-radius	El radio de extensión de la sombra.
color	El color de la sombra.

Consejos para usar sombras

Usa las sombras con cuidado para mantener un efecto natural y no afectar la legibilidad.

Prefiere sombras suaves para un aspecto más natural.
Combina varias sombras en un mismo elemento para un efecto de mayor profundidad.
No abuses de las sombras, pueden afectar la claridad del diseño.