Generador de neumorfismo
Haga botones y tarjetas que parezcan presionados fuera o dentro de la página.
- Tus datos nunca salen de tu dispositivo
- 100 % gratis
- Sin registro
- Funciona sin conexión después de la primera carga
Cómo hacer un efecto de neumorfismo
- Elige un color base y una forma.
- Elige de dónde viene la luz y ajusta la distancia, la intensidad y el desenfoque.
- Copie el CSS (y establezca el mismo color en el fondo principal).
Acerca de Generador de neumorfismo
Crear soft-UI (neumorfismo) CSS.
Todo funciona en su navegador, por lo que es instantáneo y privado. Sus colores y configuraciones recientes se recuerdan en este dispositivo, y la barra de direcciones mantiene su color para que pueda compartirlo o marcarlo.
Ideal para
- Botones y palancas de interfaz de usuario suaves
- Tarjetas de tablero y widgets
- Reproductores de música e interfaces de usuario inteligentes para el hogar
Consejo: Establecer el fondo padre en el mismo color — eso es lo que hace que la forma se vea extruida.
Preguntas frecuentes
¿Cómo se hace el neumorfismo?
Dos sombras en un elemento del mismo color que su fondo: una más oscura lejos de la luz y otra más clara hacia ella. Pulsado utiliza sombras insertadas; cóncavo y convexo agregan un gradiente sutil.
¿Es accesible el neumorfismo?
Su bajo contraste puede hacer que los botones sean difíciles de ver. Utilícelo para la decoración y agregue texto claro, iconos o bordes para controles importantes.
¿Qué colores funcionan mejor?
Luz media, colores de baja saturación — grises suaves, mentas y beiges. Las bases muy oscuras o muy brillantes dejan poco espacio para las sombras claras y oscuras.
¿Por qué se ve plano en mi sitio?
El efecto necesita que el elemento se siente sobre un fondo del mismo color. En un fondo diferente, las sombras claras y oscuras no se mezclan.
¿Puedo usarlo en botones y entradas?
Sí. El CSS es solo un fondo y una sombra de caja, por lo que funciona en botones, tarjetas y campos de formulario por igual.