Tabla de Contenidos 3 secciones
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.
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;
}
https://neumorphism.io/