Neumorfismo: soft UI, sombras duales y CSS en Astro y Tailwind
El neumorfismo o soft UI: los principios físicos del diseño blando, las sombras duales, la implementación con CSS y su convivencia con Tailwind y Astro en proyectos web.
Navegando en el blogver navegación en todos los blogs
El neumorfismo (o soft UI) surge como una evolución híbrida entre el esceptomorfismo clásico y el flat design. Su estética se fundamenta en la simulación de extrusiones y bajorrelieves mediante el uso estratégico de sombras duales, integrando el elemento en la misma superficie que el contenedor padre. Es una corriente que convive con sistemas como Material Design 3 y con las utilidades de Tailwind CSS.
https://neumorphism.io/
Para lograr este efecto, el control de la luz y el sombreado debe ser preciso y coherente:
- Unificación Cromática: El elemento y el contenedor deben compartir el mismo color de fondo, generalmente tonos pasteles o grisáceos.
- Sistema de Sombras Duales: El relieve se construye mediante dos sombras paralelas y opuestas:
- Sombra Clara: Refleja la incidencia de luz (arriba/izquierda).
- Sombra Oscura: Proyecta la profundidad física (abajo/derecha).
| Sombra | Propiedad | Función |
|---|---|---|
| Luz | Clara | Representa la fuente lumínica. |
| Proyección | Oscura | Define profundidad del elemento. |
El efecto se logra mediante la propiedad box-shadow. En un entorno de desarrollo con Astro y Tailwind CSS, es recomendable encapsular estos valores en clases personalizadas o configuraciones de tema para mantener la consistencia.
https://neumorphism.io/
/* Definición del relieve neumorfista */
.neumorphic-card {
border-radius: 50px;
background: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}En conclusión, el neumorfismo convive hoy con otras estéticas como Material Design 3 y se implementa cómodamente con utilidades de Tailwind CSS o fragmentos listos de Uiverse.