Generador de neumorfismo CSS
Crea formas neumórficas suaves y en relieve de forma visual. Elige un color base, ajusta el tamaño, el radio, la distancia de la sombra, la intensidad y el desenfoque, elige la dirección de la luz y la forma, y copia CSS limpio para tarjetas, botones e interruptores.
Última actualización:
Haz clic en un sol de una esquina para cambiar la dirección de la luz.
Cómo usar Generador de neumorfismo CSS
- Elige el color base. El neumorfismo funciona mejor con colores suaves de tono medio claro como #e0e5ec. El fondo de la página debe usar el mismo color.
- Ajusta el tamaño y el radio para que coincidan con tu tarjeta, botón o icono.
- Ajusta la distancia, la intensidad y el desenfoque. Un desenfoque de aproximadamente el doble de la distancia da el aspecto suave clásico.
- Elige la forma y la dirección de la luz: plana para tarjetas, convexa para botones, cóncava para huecos y presionada para un estado activo.
- Copia el CSS y aplícalo a un elemento cuyo padre tenga el mismo color de fondo.
Cómo se calcula el CSS del neumorfismo
Cada forma neumórfica se construye a partir del color base C y dos sombras. Con una intensidad i (por ejemplo 15% = 0.15), cada canal RGB de los colores de sombra se calcula así:
- Sombra oscura = canal × (1 − i), colocada en sentido contrario a la luz
- Sombra clara = canal × (1 + i), con un máximo de 255, colocada hacia la luz
Para #e0e5ec al 15% esto da una sombra oscura de #bec3c9 y una sombra clara de #ffffff. Con la luz en la esquina superior izquierda, una distancia de 20px y un desenfoque de 40px:
background: #e0e5ec;
box-shadow: 20px 20px 40px #bec3c9,
-20px -20px 40px #ffffff;Las cuatro formas
| Forma | Diferencia en CSS | Úsala para |
|---|---|---|
| Plana | Fondo sólido, dos sombras exteriores | Tarjetas, paneles, mosaicos |
| Convexa | Degradado de 7% más claro (lado de la luz) a 10% más oscuro | Botones, perillas, controles en relieve |
| Cóncava | Degradado de 10% más oscuro (lado de la luz) a 7% más claro | Platos, pistas de controles deslizantes, huecos |
| Presionada | Las mismas sombras con inset | Botones activos, interruptores encendidos, campos de entrada |
Consejos para un soft UI usable
- Dale al elemento padre exactamente el mismo color de fondo; de lo contrario, el efecto se rompe.
- Usa un desenfoque de aproximadamente el doble de la distancia y mantén la distancia en torno al 10% del tamaño del elemento.
- Cambia de plana o convexa a presionada en
:activeo en el estado seleccionado para que los usuarios vean una respuesta. - Agrega un contorno
:focus-visiblevisible y un buen contraste de texto. Las sombras suaves por sí solas tienen muy poco contraste. - Usa el neumorfismo en unos pocos elementos clave en lugar de en toda una interfaz.
Preguntas frecuentes
¿Qué es el neumorfismo?
El neumorfismo (también llamado soft UI) es un estilo visual en el que los elementos parecen salir del fondo o hundirse en él. Usa el mismo color para el elemento y el fondo, con una sombra clara en el lado que mira a la luz y una sombra oscura en el lado opuesto.
¿Cómo se hace una sombra neumórfica en CSS?
Con dos box-shadows en un elemento que tiene el mismo color de fondo que su padre: una sombra más oscura desplazada en sentido contrario a la luz (por ejemplo 20px 20px 60px #bebebe) y una sombra más clara desplazada hacia ella (-20px -20px 60px #ffffff). El estilo presionado usa las mismas dos sombras con la palabra clave inset.
¿Por qué no veo las sombras sobre un fondo blanco o negro?
El neumorfismo necesita margen para un tono más claro y otro más oscuro del color base. El blanco puro no puede aclararse más y el negro puro no puede oscurecerse más, así que una de las sombras desaparece. Usa un blanco roto suave o un color de tono medio.
¿Cuál es la diferencia entre cóncavo y convexo?
Ambos añaden un degradado lineal sutil sobre las sombras planas. El convexo es más claro en el lado que mira a la luz, así que la superficie parece curvada hacia afuera como un botón. El cóncavo es más oscuro en ese lado, así que parece hundido hacia adentro como un plato.
¿El neumorfismo es accesible?
No por sí solo. Las sombras suaves de bajo contraste pueden hacer que los botones sean difíciles de ver, sobre todo para personas con baja visión. Agrega etiquetas claras, iconos, contornos de foco y suficiente contraste de texto (WCAG pide 4.5:1 para el texto y 3:1 para los componentes de la interfaz).
¿El neumorfismo funciona en todos los navegadores?
Sí. Solo usa box-shadow, border-radius y linear-gradient, que todos los navegadores modernos admiten sin prefijos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.