Generador de neumorfismo en CSS
Guía
Generador de neumorfismo en CSS
Crea elementos suaves y expandidos de tipo "neumóficos" sin necesidad de ajustar manualmente dos sombras de caja opuestas. Elige un color base, selecciona una forma (plana, concava, convexa o presionada), arrastra los deslizadores para la distancia, intensidad, borde y ángulo de luz, luego copia el CSS generado directamente en tu proyecto.
Cómo Usar
- Elige un color de fondo. El mismo color se utiliza tanto para el elemento como para el lienzo circundante — eso es lo que hace que el efecto neumófico funcione.
- Elige una forma: Departamento, Concava (dip leve), Convexa (salida leve), o Interior (apretada).
- Ajustar Distancia y Ángulo de luz para establecer la dirección de la sombra.
- Ajusta Intensidad y Blur hasta que la superficie se sienta adecuada.
- Copia el CSS o activa Muestra **HTML** + **CSS** *(Note: "Show" → "Muestra")* para obtener un fragmento listo para pegar.
Características
- Previsualización en tiempo real — cada cambio en los deslizadores actualiza instantáneamente el elemento mostrado.
- Cinco presets incorporados — Bajo luz, Fuerza de luz, Bajo oscuro, Fuerza oscura y Presionado.
- Colores de sombra derivados automáticamente — las sombras claras y oscuras se iluminan o oscurecen matemáticamente a partir del color base, para que el efecto siempre se mantenga coherente.
- Gradientes concavos y convexos — la herramienta genera un gradiente lineal compatible con la superficie del elemento en esos modos.
- Modo inset (apretado) — para botones que parezcan "apretados" al hacer clic.
- Control del ángulo de luz — gira la fuente de luz virtual desde 0° hasta 360°.
- CSS listo para copiar — salida limpia que incluye tanto la declaración de sombra como el fondo de superficie.
Preguntas frecuentes
-
¿Qué es el neumorfismo?
El neumorfismo (también conocido como interfaz suave) es un estilo visual en el que los elementos parecen salir del fondo o hundirse en él. Se logra mediante dos sombras de caja con el mismo borde — una sombra más clara en el lado expuesto a la luz y otra más oscura en el lado opuesto — ambas mostradas sobre un fondo del mismo color que el elemento.
-
¿Por qué el elemento debe compartir el color de fondo?
El neumorfismo depende de la ilusión de que la forma forma parte de la misma superficie que el fondo. Si el elemento utiliza un color diferente, deja de parecer una extrusión y se percibe como un piso plano con dos sombras aleatorias, lo que rompe el efecto.
-
¿Son las interfaces neumóficas accesibles?
Tienen conocidas limitaciones en accesibilidad. Como todos los elementos comparten el color de fondo, el contraste frente al texto y otros elementos de interfaz suele ser muy bajo, lo que puede no cumplir los requisitos de contraste de WCAG y confundir a usuarios con lectores de pantalla. Utiliza el neumorfismo para superficies decorativas y mantén los elementos interactivos críticos con alto contraste.
-
¿Cómo está relacionado el ángulo de luz con los desplazamientos de sombra?
Los dos desplazamientos de sombra se derivan del ángulo de luz usando trigonometría básica: offsetX = cos(angulo) × distancia, offsetY = sin(angulo) × distancia. La sombra opuesta se coloca en desplazamientos negados para que las dos sombras estén en bordes opuestos, coincidiendo con cómo un foco real proyectaría las sombras.
Instalar extensiones
Agregue herramientas IO a su navegador favorito para obtener acceso instantáneo y búsquedas más rápidas
恵 ¡El marcador ha llegado!
Marcador es una forma divertida de llevar un registro de tus juegos, todos los datos se almacenan en tu navegador. ¡Próximamente habrá más funciones!
Herramientas clave
Ver todo Los recién llegados
Ver todoActualizar: Nuestro última herramienta was added on May 30, 2026
Involucrarse
Ayúdanos a seguir brindando valiosas herramientas gratuitas
