Cómo funciona box-shadow
La propiedad CSS box-shadow añade sombras a los elementos, con la sintaxis box-shadow: X Y desenfoque expansión color;. Ajustando cada parámetro visualmente, esta herramienta genera el código exacto para el efecto deseado.
Qué hace cada parámetro
| Parámetro | Función |
|---|---|
| Desplazamiento X | Mueve la sombra a la derecha (positivo) o izquierda (negativo) |
| Desplazamiento Y | Mueve la sombra hacia abajo (positivo) o hacia arriba (negativo) |
| Desenfoque | Cuanto mayor, más suave y difuminado queda el borde de la sombra |
| Expansión (spread) | Aumenta o disminuye el tamaño de la sombra en todas las direcciones |
| Inset | Cuando está marcado, la sombra queda por dentro del elemento en vez de por fuera |
Consejo de diseño
Las sombras suaves con desenfoque alto y color con baja opacidad (como rgba(0,0,0,0.15)) suelen verse más modernas que las sombras duras y oscuras, muy usadas en tarjetas y botones de interfaces actuales.
Preguntas frecuentes
¿Qué es el parámetro "expansión" (spread)?
Controla el tamaño de la sombra en todas las direcciones, independientemente del desenfoque — valores positivos expanden la sombra, negativos la reducen.
¿Cuál es la diferencia entre sombra normal e "inset"?
La sombra normal aparece por fuera del elemento, como si flotara; la inset aparece por dentro, creando un efecto de profundidad o relieve.
¿Puedo usar colores con transparencia?
Sí, usa el formato rgba(r, g, b, alpha), como rgba(0,0,0,0.25), para controlar la opacidad de la sombra.
¿Es posible tener más de una sombra en el mismo elemento?
Sí — en CSS puedes separar varias definiciones de box-shadow con coma, aunque esta herramienta genera una sombra a la vez.