Mejora separacion
Ayuda a leer capas y jerarquia sin robar protagonismo.
Concepto base
Que es box shadow y por que cambia tanto el aspecto de un bloque
Entiende que es box shadow en CSS, para que sirve y que cambian offset, blur, spread e inset.
Efecto visual
Una sombra puede sumar profundidad o ruido
La misma propiedad mejora o empeora una interfaz segun como la uses.
Puede distraer
Si exageras blur, spread u opacidad, la UI se vuelve mas pesada.
Mejor reutilizar
Usar pocas sombras consistentes suele dar mejores resultados.
Idea principal
Para que sirve entender box shadow
Da separacion visual
Una sombra ayuda a separar un elemento del fondo y darle mas presencia.
Refuerza jerarquia
Cambiar la intensidad de la sombra puede hacer que una tarjeta o boton se sienta mas importante.
Mejora sistemas de UI
Entender la propiedad ayuda a crear sombras coherentes y reutilizables.
Partes clave
Como se compone box shadow
Offset X y Y
Mueven la sombra horizontal y verticalmente.
Blur
Controla que tan suave o difusa se ve la sombra.
Spread
Expande o reduce el tamano de la sombra.
Color e inset
Definen el tono y si la sombra va por fuera o por dentro.
Casos comunes
Donde suele usarse box shadow
Tarjetas y paneles
Ayuda a que un bloque se sienta flotando sobre el fondo.
Modales y popovers
Sirve para dar mas separacion cuando un elemento aparece encima de otros.
Botones y estados
Tambien puede reforzar interaccion o profundidad en componentes pequenos.
Preguntas frecuentes
Dudas comunes sobre box shadow
Box shadow sirve solo para tarjetas?
No. Tambien se usa en botones, campos, modales y otros componentes.
Que parametro cambia mas el look?
Blur y opacity suelen cambiar mucho la sensacion visual, pero depende del conjunto.
Inset es obligatorio?
No. Solo se usa cuando quieres que la sombra se vea interna.
Conviene una sombra muy fuerte?
Normalmente no. En interfaces suele funcionar mejor una sombra moderada y consistente.
Sigue explorando
Paginas y herramientas relacionadas
Ajustalo ya
Prueba una sombra CSS y copia el resultado al instante
Con la herramienta puedes cambiar offset, blur, spread y color viendo la sombra en tiempo real.