El neumorfismo es la apariencia en la que un botón o tarjeta parece estar presionado fuera de la página misma, como una forma moldeada de plástico blando. No hay borde, ni color de relleno que difiera del fondo, solo un resaltado pálido en un lado y una sombra suave en el otro. Fotografía maravillosamente en maquetas de diseño. En una interfaz real es fácil equivocarse de dos maneras: el efecto desaparece o los controles se vuelven difíciles de ver.
Ambos problemas se reducen a una pequeña cantidad de aritmética sobre colores y sombras. Esta guía explica cómo se construye el efecto de interfaz de usuario suave a partir de dos box-shadow capas, cómo se derivan los tonos claros y oscuros de un color de superficie, qué cambian las formas plana, cóncava, convexa y prensada, y cómo mantener una interfaz neumórfica utilizable según las reglas de contraste de WCAG. El Generador de neumorfismo CSS produce todo el código a continuación con una vista previa en vivo.
TL;Dr: Un elemento neumórfico tiene el mismo color de fondo que la página y dos sombras de cuadro: uno más oscuro desplazado hacia abajo y hacia la derecha, y otro más claro desplazado hacia arriba y hacia la izquierda. El uso de la palabra clave insertada en ambos hace que el elemento parezca presionado. El generador de neumorfismo CSS deriva ambos colores de sombra del color de su superficie, con controles deslizantes para distancia (2 a 50 px), desenfoque (0 a 100 px), intensidad (2 a 40%) y radio (0 a 80 px), además de formas planas, cóncavas, convexas y prensadas. La superficie de luz predeterminada proporciona
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. Esas sombras alcanzan sólo un contraste de aproximadamente 1,5:1 con la superficie, muy por debajo de los límites de control que pide WCAG 3:1, por lo que los elementos interactivos necesitan un borde visible o un estado de enfoque. Es del lado del cliente, gratuito, sin registro.
¿Qué es el neumorfismo en el diseño de la interfaz de usuario?
El neumorfismo, también llamado interfaz de usuario suave, es un estilo visual en el que los elementos de la interfaz aparecen extruidos o presionados en su fondo usando sombras claras y oscuras emparejadas en lugar de bordes o rellenos contrastantes. El nombre combina "nuevo" y "eskeuomorfismo" el estilo más antiguo que imitaba materiales físicos. El neumorfismo imita un material, una única superficie continua, y se basa en una fuente de luz imaginada en la parte superior izquierda.
El estilo se hizo popular en los sitios de exhibición de diseño alrededor de 2020. Se adapta bien a paneles decorativos, paneles vistos en buenas pantallas y gráficos únicos de héroes. No se adapta bien a formas densas, cualquier cosa utilizada al aire libre y cualquier control que un usuario deba encontrar rápidamente, por razones cubiertas en la sección de accesibilidad.
¿cómo funciona el efecto neumórfico en CSS?
El efecto necesita tres cosas: un color de fondo en el elemento que coincida con la página, un radio de borde y dos sombras proyectadas en direcciones opuestas. El CSS box-shadow la propiedad acepta una lista de sombras separadas por comas, cada una con un desplazamiento x, un desplazamiento y, un radio borroso y un color, como se documenta en MDN's referencia de sombras de cuadros y especificado en Antecedentes y fronteras de CSS Nivel 3.
Aquí está la salida del generador 's Preajuste de luz predeterminado:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
Lea la lista de sombras de izquierda a derecha. La primera sombra está desplazada 12 píxeles hacia la derecha y 12 hacia abajo, borrosa sobre 24 píxeles, en un gris más oscuro que la superficie: esa es la sombra en el lado alejado de la luz. El segundo está desplazado 12 píxeles hacia la izquierda y 12 hacia arriba en un color más claro que la superficie: lo más destacado en el lado que mira hacia la luz. Porque el fondo propio del elemento ' es el mismo #e0e0e0 como página, no hay ningún borde visible. La forma existe sólo como el límite donde se encuentran las dos sombras.
¿Por qué no aparece mi efecto de neumorfismo?
La causa más común es una discrepancia entre el fondo del elemento 's y lo que haya detrás. Si la página es blanca y la tarjeta lo es #e0e0e0, ves una tarjeta gris con una sombra, no una extrusión suave. Establezca el fondo principal 's al mismo color que el elemento. El panel de vista previa del generador ' hace esto automáticamente, razón por la cual se ve bien y mal cuando se pega en una página blanca.
La segunda causa es un color resaltado que no se puede ver. En una superficie muy clara el "light" Es posible que la sombra ya sea de color blanco puro, y en una página de color blanco puro una sombra blanca es invisible. Por eso también el neumorfismo casi nunca se realiza #ffffff.
¿Cómo se calculan los colores de las sombras claras y oscuras?
El generador desplaza cada canal rojo, verde y azul del color de la superficie en la misma cantidad: el porcentaje de intensidad de 255. El tono claro suma esa cantidad y el tono oscuro la resta, y cada canal se sujeta al rango de 0 a 255 y redondeado.
Aquí está el cálculo de la superficie preestablecida de luz predeterminada #e0e0e0 (224, 224, 224) al 15% de intensidad:
- Monto del turno: 15% de 255 = 38,25.
- Tono oscuro: 224 - 38,25 = 185,75, redondeado a 186, que es hexadecimal
ba. Rezultat:#bababa. - Sombra clara: 224 + 38,25 = 262,25, sujeto a 255, hexadecimal
ff. Rezultat:#ffffff.
El paso 3 muestra un límite que vale la pena conocer. En #e0e0e0 el resaltado alcanza el blanco puro una vez que pasa la intensidad (255 - 224) / 255 = 12,2%. Cualquier intensidad superior que oscurezca la sombra sin hacer que el resaltado sea más brillante, por lo que el efecto se vuelve desigual. En superficies claras, mantenga la intensidad cerca de ese punto de sujeción o elija una superficie ligeramente más oscura para que el resaltado tenga espacio.
La misma regla da los otros ajustes preestablecidos:
| Preestablecido | Superficie | Distancia/borroso | Intensidad | Sombra oscura | Sombra clara |
|---|---|---|---|---|---|
| Luz | #e0e0e0 |
12 / 24 px | 15% | #bababa |
#ffffff |
| Tarjeta | #f0f0f3 |
10 / 20 px | 12% | #d1d1d4 |
#ffffff |
| Oscuro | #2d2f34 |
12 / 24 px | 12% | #0e1015 |
#4c4e53 |
| Presionado | #e0e0e0 |
12 / 24 px | 15% | #bababa |
#ffffff |
| Convexo | #e0e0e0 |
12 / 24 px | 15% | #bababa |
#ffffff |
En el preajuste Oscuro, restar 30,6 de cada canal de (45, 47, 52) da (14, 16, 21), o #0e1015, y sumándolo da (76, 78, 83), o #4c4e53. Debido a que el desplazamiento es igual a través de los canales, el ligero tinte azul de la superficie se transmite a ambos tonos, por lo que una tarjeta neumórfica oscura no se convierte en gris neutro plano.
¿Qué cambian las cuatro formas?
La forma controla el relleno de fondo del elemento ' y si las sombras se encuentran fuera o dentro de él. La distancia, el desenfoque y el radio se comportan igual para los cuatro.
| Forma | conocimientos | Sombras | parece |
|---|---|---|---|
| Plano | Color de superficie sólida | Exterior | Una meseta elevada |
| Convexo | linear-gradient(145deg, light, dark) |
Exterior | Una cúpula elevada, iluminada desde arriba a la izquierda |
| Cóncavo | linear-gradient(145deg, dark, light) |
Exterior | Un plato elevado que se curva hacia adentro |
| Presionado | Color de superficie sólida | a la vez inset |
Un hueco empujó la página |
El ajuste preestablecido Pressed produce:
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
Con inset, las sombras se dibujan dentro del elemento 's caja de relleno, por lo que el tono oscuro aparece a lo largo del borde interior superior izquierdo y el resaltado a lo largo de la parte inferior derecha. Eso invierte la señal de iluminación y se lee como una depresión. Es el natural "activo" o "on" estado para un interruptor cuyo estado de reposo es plano.
El ajuste preestablecido Convex utiliza tonos claros y oscuros como paradas de gradiente linear-gradient(145deg, #ffffff, #bababa), que es una curva bastante fuerte con una intensidad del 15%. Para una cúpula más sutil, baje la intensidad; que suaviza el gradiente y las sombras juntos, ya que ambos provienen de los mismos dos colores.
¿cómo interactúan la distancia, el desenfoque y el radio?
Los controles deslizantes son independientes, pero la apariencia depende de sus proporciones.
- Distancia (2 a 50 px) establece hasta qué punto se desplaza cada sombra en ambos ejes. Controla la altura aparente: distancias mayores hacen que el elemento flote más arriba de la página.
- Desenfocar (0 a 100 px) establece qué tan suaves son los bordes de las sombras. Un desenfoque aproximadamente el doble de la distancia, como en cada preajuste, le da el aspecto acolchado característico. El desenfoque igual o inferior a la distancia produce sombras con bordes duros que se parecen más a un recorte.
- Radio (0 a 80 px) rodea las esquinas. La interfaz de usuario suave casi siempre utiliza un redondeo generoso; Las esquinas cuadradas con sombras suaves parecen un error de renderizado.
- Intensidad (2 a 40%) establece qué tan lejos se mueven los tonos del color de la superficie.
Una relación inicial práctica es borrosa = 2 x distancia, radio = 2 x distancia, intensidad cerca del punto de sujeción de su superficie. Para elementos pequeños como un botón de icono de 40 píxeles, escale la distancia de 4 a 6 píxeles; un desplazamiento de 12 píxeles en un botón de 40 píxeles hace que la sombra sea más grande que el control.
¿es accesible el neumorfismo?
No por defecto. Un control neumórfico 's borde está definido por sombras que difieren de la superficie en solo un pequeño porcentaje de luminancia, y que no cumple con el requisito WCAG para el límite visible de los componentes interactivos.
WCAG 2.2 Criterio de éxito 1.4.11, Contraste sin texto, requiere que la información visual necesaria para identificar un componente de la interfaz de usuario y sus estados tenga una relación de contraste de al menos 3:1 frente a colores adyacentes. La relación de contraste utiliza la fórmula de luminancia relativa definida en WCAG 2.2. Trabajando hasta el final para el ajuste preestablecido predeterminado:
| Pareja | Luminancia relativa | Relación de contraste | Cumple 3:1? |
|---|---|---|---|
Sombra oscura #bababa vs superficie #e0e0e0 |
0,491 frente a 0,745 | Aproximativ 1,47:1 | prohibido |
Sombra clara #ffffff vs superficie #e0e0e0 |
1.000 frente a 0,745 | Aproximativ 1,32:1 | prohibido |
Frontera #7f7f7f vs superficie #e0e0e0 |
0,212 frente a 0,745 | Aproximativ 3.03:1 | Justo |
Frontera #767676 vs superficie #e0e0e0 |
0,181 frente a 0,745 | Aproximativ 3,44:1 | Sí, con margen |
Texto #333333 vs superficie #e0e0e0 |
0,033 frente a 0,745 | Aproximativ 9,6:1 | Sí (también pasa 4.5:1 para texto) |
Y esas figuras de sombras son el mejor caso. El desenfoque extiende el color de la sombra, por lo que la mayor parte de la sombra visible es más clara #bababa. Aumentar la intensidad no ayuda mucho en una superficie clara, porque el resaltado ya está sujeto en blanco.
Para comprobar tus propios colores, el comprobador de contraste de color calcula la proporción para cualquier par y el guía para comprobar el contraste de color explica la fórmula en detalle.
Cómo mantener el look y pasar las reglas de contraste
No tienes que abandonar el estilo. Tienes que dejar de confiar en él para cualquier cosa que un usuario deba percibir.
- Utilice una interfaz de usuario suave para contenedores, no para controles. Las tarjetas, paneles y pozos decorativos pueden ser puramente neumórficos. El criterio 1.4.11 trata sobre componentes interactivos y gráficos significativos, por lo que un contenedor cuyo contenido se identifica conlleva mucho menos riesgo que un botón cuyo borde es el único signo de que existe.
- Dale a cada elemento interactivo una verdadera señal. Un borde de 1 o 2 píxeles en un color de 3:1 o mejor, un icono contrastante o una etiqueta de texto.
- Haz que el enfoque sea obvio. Agregar un
:focus-visiblecontorno en un color de alto contraste. Las sombras suaves no son un indicador de enfoque. - No señale el estado solo con profundidad. Si se presiona significa "on", también cambie un icono, una etiqueta o un color.
- Respetar la configuración del usuario. los consulta de medios de contraste de preferencias le permite agregar bordes o eliminar el efecto cuando un usuario solicita más contraste.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
Cómo generar neumorfismo CSS, paso a paso
- Abre el generador de neumorfismo y elige un preajuste como punto de partida: Claro, Tarjeta, Oscuro, Prensado o Convexo.
- Establezca el color de la superficie con el selector de color para que coincida con el fondo sobre el que se asentará su elemento.
- Ajuste la distancia y el desenfoque para obtener altura y suavidad, luego la intensidad para el contraste y vea la vista previa en vivo.
- Elija una forma: plana, cóncava, convexa o prensada.
- Establezca el radio para adaptarlo al tamaño del elemento.
- Haga clic en Copiar CSS y pegue las tres declaraciones en su regla. Recuerde darle al padre el mismo color de fondo.
¿cómo se apoyan los temas claros y oscuros?
Genera un conjunto de valores para cada tema e intercambialos con propiedades personalizadas. Los ajustes preestablecidos de Luz y Oscuridad anteriores dan un par de trabajo:
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
El neumorfismo oscuro tiene el espejo del problema de la superficie clara: la sombra se adhiere al negro y lo más destacado lleva el efecto. Verifique el contraste por separado para cada tema.
Comparación del neumorfismo, el cristalmorfismo y las sombras simples
La interfaz de usuario suave es una de varias formas de mostrar la profundidad y cada una tiene costos diferentes.
| Estilo | Css básico | Señal de profundidad | Riesgo de contraste | bueno por |
|---|---|---|---|---|
| Neumorfismo | Dos opuestos box-shadow capas, fondo a juego |
Extrusión de la página | Alto | Paneles decorativos, salpicaderos de escaparate |
| Vidriomorfismo | backdrop-filter: blur() y un relleno translúcido |
Capa esmerilada sobre contenido | Medio, depende de lo que hay detrás | Superposiciones, tarjetas sobre imágenes |
| Elevación estilo material | Uno o dos hacia abajo box-shadow capas |
Tarjeta flotando sobre la página | Bajo | Interfaces generales |
| Piso con cenefas | border y rellenar colores |
nadie | Más bajo | Formularios, datos densos, trabajo que prioriza la accesibilidad |
los generador de morfismo de vidrio construye el estilo de vidrio esmerilado y el guía del generador de sombras de caja cubre sombras de elevación individuales y en capas. Para texto brillante o en relieve en lugar de cuadros, el generador de sombras de texto aplica una idea similar al tipo. Todos ellos están listados en el Centro de herramientas CSS.
¿El generador es privado?
Sí. La vista previa y el CSS se generan en su navegador con JavaScript, no se carga ni almacena nada y la página sigue funcionando sin conexión una vez cargada. Copiar el CSS cuenta para un límite de uso diario y aparece un mensaje si se alcanza ese límite.
