Sombra CSS de neumorfismo: código de dos capas
Cree visualmente código CSS de sombra de cuadro: controles deslizantes para desplazamiento, desenfoque, extensión, color con opacidad, modo de inserción y hasta cuatro capas con vista previa en vivo.
Resultado
Esta página abre el generador con el par neumórfico clásico ya construido: una capa clara desplazada −8px/−8px en casi blanco y una capa oscura desplazada 8px/8px en un azul grisáceo apagado, ambas borrosas 16px. Cambie entre las dos capas en la lista de capas para ajustar cada lado de forma independiente.
El neumorfismo (interfaz de usuario suave) es el estilo en relieve que alcanzó su punto máximo alrededor de 2020: los elementos parecen extruidos del fondo en lugar de flotar sobre él. Honestamente, viene con compensaciones reales: el efecto solo funciona cuando el fondo del elemento coincide con el fondo de la página, y los bordes de bajo contraste pueden perjudicar la accesibilidad, por lo que la mayoría de los equipos ahora lo usan como un acento, no como un lenguaje de diseño completo.
Si el estilo se ajusta a su proyecto, esta declaración de dos capas es el punto de partida canónico: copie el CSS, establezca el elemento y el fondo de la página en el mismo gris suave y agregue un radio de borde coincidente. Todo se ejecuta localmente en su navegador.