Generador CSS de neumorfismo
Genera CSS soft UI (neumorfismo): sombras clara y oscura derivadas de tu color base, formas plana, cóncava, convexa o presionada y cuatro direcciones de luz.
Ajustes de neumorfismo
Las sombras clara y oscura se derivan del color base subiendo y bajando su luminosidad OKLCH según la intensidad. Usa el mismo color para el fondo de la página.
Vista previa
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Herramientas Relacionadas
Ver Todas¿Qué es Generador de neumorfismo?
Produce el aspecto soft UI en el que un elemento parece extruido de la página (o hundido en ella). Deriva un color de sombra más claro y otro más oscuro a partir de tu color base y los combina como dos box-shadow opuestas, con rellenos de degradado opcionales para superficies cóncavas y convexas.
Cómo usar Generador de neumorfismo
- Introduce el Color base (usa el mismo color para el fondo de tu página).
- Elige la Forma: Plano, Cóncavo, Convexo o Presionado.
- Elige la dirección de la Fuente de luz.
- Ajusta la Distancia, el Desenfoque, la Intensidad, el Radio y el Tamaño de la vista previa.
- Copia el código CSS.
Ejemplo
Base #e0e0e0, plano, luz desde arriba a la izquierda, distancia 20px, desenfoque 60px, intensidad 0,15
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Cuándo usar Generador de neumorfismo
Úsalo para paneles desenfadados, controles de apps de domótica o música y piezas de portafolio. El neumorfismo tiene poco contraste por naturaleza, así que no dependas solo de él para botones o campos de formulario importantes; añade etiquetas claras, iconos o un anillo de foco para la accesibilidad.
Cómo funciona Generador de neumorfismo
Los colores de sombra clara y oscura se calculan en OKLCH subiendo y bajando la luminosidad del color base según la intensidad, manteniendo el tono y el croma (ajustados a la gama sRGB), así que también funciona con bases de color y oscuras. La sombra oscura se desplaza en dirección contraria a la fuente de luz según la distancia y la clara hacia ella, ambas con el mismo desenfoque. Presionado usa dos sombras inset. Cóncavo y convexo añaden un linear-gradient cuyo ángulo sigue la dirección de la luz, con colores un tercio de la intensidad más claros y más oscuros.
Casos de Uso Comunes
- Interruptores y botones suaves
- Tarjetas de panel sobre un fondo a juego
- Estado presionado para controles activos
- Interfaces de calculadora o reproductor de música
- Soft UI en modo oscuro usando un color base oscuro
Preguntas Frecuentes
¿Por qué el fondo de la página debe coincidir con el color base?
La ilusión surge de que el elemento tenga el mismo color que su entorno, de modo que solo las sombras revelan su forma. Un fondo distinto rompe el efecto.
¿Funciona con colores oscuros?
Sí. Como la luminosidad se desplaza en OKLCH en lugar de multiplicarse, una base oscura sigue obteniendo una sombra de luz visiblemente más clara.
¿Qué diferencia hay entre cóncavo y convexo?
Convexo es más claro en el lado que mira a la luz (sobresale); cóncavo es más oscuro ahí (parece hundido).