Generador de Neumorphism
Crea estilos soft UI con doble sombra (luz + oscuridad), relieve y hundido. Ajusta el ángulo de luz y copia el CSS.
.neu {
background: #e0e5ec;
border-radius: 32px;
box-shadow:
10px -7px 24px #ffffff,
-10px 7px 24px #c1c5cb;
}
.neu-pressed {
background: #e0e5ec;
border-radius: 32px;
box-shadow: inset 10px -7px 24px #ffffff,
inset -10px 7px 24px #c1c5cb;
}Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
El neumorphism (o «soft UI») es un estilo de diseño donde los elementos parecen extruidos del propio fondo: una tarjeta no flota sobre la superficie, sino que sale de ella. Se consigue con dos sombras simultáneas —una clara hacia la fuente de luz y otra oscura hacia el lado opuesto— sobre un fondo exactamente igual al de los elementos. Esta herramienta calcula las dos sombras a partir de tu color base, el ángulo de luz y la intensidad elegida, y genera las clases .neu (relieve) y .neu-pressed (hundido) listas para pegar. La variante hundida es perfecta para interruptores, sliders o campos de formulario activos.
Características
- ✓Variantes relieve y hundido incluidas
- ✓Ángulo de luz, distancia, blur e intensidad
- ✓Color base libre con sombras calculadas
- ✓Vista previa sobre el color real
- ✓100% en el navegador, sin registro
¿Cómo generar un estilo neumorphism?
- 1
Elige el color base
Fondo y elemento deben compartir exactamente el mismo color.
- 2
Ajusta luz y profundidad
Ángulo, distancia, desenfoque e intensidad de la sombra doble.
- 3
Compara relieve y hundido
La vista previa muestra las dos variantes a la vez.
- 4
Copia el CSS
Pega .neu y .neu-pressed en tu hoja de estilos.
Preguntas frecuentes
¿El neumorphism cumple con la accesibilidad?
Con cuidado: al tener el mismo color que el fondo, el contraste de los bordes es casi nulo. Usa siempre texto y elementos interactivos con suficiente contraste por separado, y añade estados focus visibles para teclado.
¿Por qué mis sombras se ven grises y sucias?
Las sombras puras negras rompen el efecto. Esta herramienta oscurece y aclara tu propio color base, manteniendo el tono coherente; si cambias el color base después, vuelve a copiar el CSS.
¿Se sube algo a un servidor?
No, el código se genera combinando tus opciones directamente en tu navegador.
Herramientas relacionadas
Incrusta Generador de Neumorphism en tu web
Integra Generador de Neumorphism en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/neumorphism-generator"
width="100%"
height="700"
frameborder="0"
title="Generador de Neumorphism — miguelacm.es"
></iframe>