Generador de neomorfismo CSS
Crea superficies de interfaz suaves y extruidas.
El neomorfismo usa sombras claras y oscuras emparejadas sobre un fondo coincidente para que los elementos parezcan suavemente extruidos. Configura el fondo, la distancia, la intensidad y el radio, y copia el CSS.
Color de superficie
20px
60%
16px
background: #e0e5ec; border-radius: 16px; box-shadow: 20px 20px 30px rgba(174, 181, 195, 0.60), -20px -20px 30px rgba(255, 255, 255, 0.60);
Cómo construir neomorfismo
- Elige un color de fondo; los grises pastel suaves funcionan mejor.
- Elige modo claro u oscuro.
- Ajusta distancia, intensidad y radio con los deslizadores.
- Copia el CSS y úsalo en elementos con el mismo color de fondo.
Preguntas frecuentes
¿Por qué el elemento debe compartir el color de fondo?
La ilusión depende de que ambas sombras se fundan con el mismo color de superficie, así que el elemento y su contenedor deben coincidir.
¿Cuál es la diferencia entre modo claro y oscuro?
El modo oscuro usa sombras blancas y negras sutiles sobre un fondo oscuro en lugar del clásico aspecto gris claro.
¿El neomorfismo es accesible?
Úsalo con contraste suficiente para el texto y nunca dependas solo de la sombra para indicar interactividad.