Generador de neumorfismo CSS

Genera CSS soft-UI (neumorfismo) a partir de un color base con formas plana, cóncava o convexa y controles de distancia, intensidad, desenfoque y radio, con vista previa en vivo.

Cargando herramienta…

Generador de neumorfismo CSS — Elige un color base, selecciona una forma plana, cóncava o convexa y ajusta la distancia, la intensidad, el desenfoque y el radio de las esquinas — la doble sombra clara y oscura correspondiente se integra en un bloque de CSS listo para copiar mientras una vista previa se actualiza al lado. Todo se ejecuta localmente en tu navegador, así que tus colores y ajustes nunca se suben. Copia la regla generada directamente en tu hoja de estilos.

¿Qué es Generador de neumorfismo CSS?

El generador de neumorfismo CSS es una herramienta visual gratuita para crear el aspecto soft-UI (neumorfismo), en el que los elementos parecen sobresalir de la superficie o estar hundidos en ella mediante dos sombras desplazadas del mismo tono. Está pensado para diseñadores de interfaces y desarrolladores front-end que quieren esa profundidad sutil y táctil sin ajustar a mano pares de box-shadow. Define un color base con el selector o un campo hexadecimal, cambia la Forma entre Plana, Cóncava y Convexa, y ajusta la Distancia (cuánto se desplazan las sombras), la Intensidad (la fuerza del contraste claro/oscuro), el Desenfoque (suavidad) y el Radio (redondeo de esquinas). La herramienta deriva un brillo más claro y una sombra más oscura de tu color base y los combina — añadiendo opcionalmente un degradado sutil en las formas cóncava y convexa — en una sola regla de CSS, mostrada en vivo sobre un fondo a juego y generada como código copiable.

Cómo usar Generador de neumorfismo CSS

  1. Elige el color base de la superficie con la muestra o escribiendo un valor hexadecimal como #e0e5ec.
  2. Selecciona una Forma: Plana para un panel elevado, Cóncava para un hueco hundido o Convexa para un abultamiento abovedado.
  3. Ajusta la Distancia para alejar las sombras clara y oscura y lograr una extrusión más profunda.
  4. Modifica la Intensidad para hacer el contraste brillo/sombra más fuerte o más sutil.
  5. Ajusta el Desenfoque para bordes más suaves o nítidos y el Radio para redondear las esquinas.
  6. Revisa la vista previa en vivo y copia el CSS de neumorfismo generado en tu hoja de estilos.

Ejemplos

Tarjeta plana elevada

Entrada

color #e0e5ec, forma Plana, distancia 12, intensidad 15, desenfoque 24, radio 20

Salida

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

Botón cóncavo hundido

Entrada

color #e0e5ec, forma Cóncava, distancia 8, intensidad 15, desenfoque 16, radio 16

Salida

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

Chip convexo abovedado

Entrada

color #3a3f47, forma Convexa, distancia 6, intensidad 20, desenfoque 12, radio 12

Salida

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Preguntas frecuentes

¿Qué es el neumorfismo?
El neumorfismo (o soft UI) es un estilo en el que los elementos parecen sobresalir de una superficie de un solo color o estar hundidos en ella, usando dos box-shadow desplazadas del mismo tono: una más clara arriba a la izquierda y otra más oscura abajo a la derecha. Esta herramienta deriva ambas sombras de tu color base para que siempre combinen con la superficie.
¿Cuál es la diferencia entre Plana, Cóncava y Convexa?
Plana mantiene la superficie de un color sólido, por lo que el elemento parece elevado sobre el fondo. Cóncava añade un degradado sutil que oscurece hacia arriba a la izquierda, haciendo que parezca ahuecado hacia dentro. Convexa invierte el degradado para que el centro parezca abovedado y levantado. Las sombras clara y oscura no cambian; solo cambia el relleno de la superficie.
¿Cómo funcionan Distancia, Intensidad, Desenfoque y Radio?
La Distancia es el desplazamiento en píxeles de ambas sombras: valores mayores alejan el elemento de la superficie. La Intensidad controla cuánto más claras y oscuras son las dos sombras respecto al color base. El Desenfoque suaviza los bordes de la sombra y el Radio redondea las esquinas. El CSS se actualiza en vivo al cambiar cualquiera de ellos.
¿Qué color debo usar para el fondo?
El neumorfismo solo se ve correctamente cuando el elemento se apoya en una superficie del mismo color base: aplica el mismo color al elemento padre o al fondo de la página. La vista previa usa tu color base como fondo para que puedas valorar el efecto con precisión antes de copiar.
¿Se suben mis datos a algún sitio?
No. El generador se ejecuta por completo en tu navegador con JavaScript: tu color y tus ajustes nunca se envían a un servidor, así que funciona de forma privada e incluso sin conexión una vez cargada la página.

Herramientas relacionadas

Código a imagen

Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.

Verificador de contraste de color

Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.

Mezclador de colores

Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.

Generador de tonos de color

Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.