Diseñando profundidad con sombras
La propiedad CSS box-shadow simula elevación y luz proyectando suaves desplazamientos detrás de los elementos. Un generador permite ajustar blur, spread y color antes de copiar el código listo para producción.
Anatomía de una box-shadow
Cada sombra se describe con desplazamientos horizontal y vertical, radio de desenfoque, radio de expansión y color.
El modo inset opcional invierte la sombra hacia adentro para crear efectos de relieve o presión.
Por qué ayuda una herramienta visual
Ajustar valores directamente en CSS exige recargar o inspeccionar elementos una y otra vez.
Controles interactivos muestran feedback instantáneo, de modo que diseñadores e ingenieros acuerdan la misma escala de profundidad.
Evolución de la profundidad en interfaces
Las interfaces eskeumórficas usaban sombras marcadas para imitar materiales reales. Sistemas modernos como Material Design formalizaron tokens de elevación con sombras sutiles y en capas.
Conocer esa historia ayuda a equilibrar realismo, rendimiento y accesibilidad.
Dónde aplicar sombras personalizadas
- Tarjetas flotantes, diálogos y tooltips que requieren jerarquía
- Controles interactivos como botones o chips para indicar foco
- Spotlights de onboarding o guías paso a paso
- Ilustraciones con identidad de marca que reutilizan CSS en lugar de bitmaps
Buenas prácticas para una profundidad creíble
- Reduce la opacidad conforme aumenta el desenfoque para imitar la luz real
- Apila varias sombras para separar luz ambiental de sombras duras
- Documenta tokens de elevación junto con espaciado y tipografía
- Recuerda el rendimiento: un blur grande sobre elementos enormes puede costar GPU