Generador de neumorphism
Diseña superficies de interfaz neumórficas suaves y extruidas con sombras dobles y copia el CSS.
—
El fondo del lienzo coincide con el color del elemento: eso es lo que da ese aspecto neumórfico suave y extruido.
De forma predeterminada, las sombras clara y oscura se derivan del color base. Actívalo para definirlas tú mismo.
Acerca de Generador de neumorphism
El Generador de Neumorfismo diseña el aspecto suave y extruido de "soft UI": un elemento que parece presionado hacia fuera de, o hacia dentro de, la superficie detrás de él. Elige un color base y la herramienta deriva todo lo demás, porque el efecto solo funciona cuando el elemento y su fondo comparten el mismo color y la profundidad proviene enteramente de dos sombras de caja opuestas.
Los deslizadores controlan la geometría: tamaño, radio de borde, la distancia de las sombras, su intensidad y desenfoque. Cuatro modos de forma (plano, cóncavo, convexo y presionado) intercambian el gradiente interno y la dirección de la sombra, y un selector de fuente de luz mueve el resalte a cualquiera de las cuatro esquinas para que el elemento coincida con la iluminación de tu diseño.
De forma predeterminada, los colores de sombra claro y oscuro se calculan a partir del color base, pero un modo manual te permite establecer ambos tú mismo. El CSS generado (background, radio y la doble box-shadow) está a un clic de distancia.
Cómo usar Generador de neumorphism
- Elige el color base: se aplica tanto al elemento como al lienzo detrás de él.
- Elige una forma: plano, cóncavo, convexo o presionado.
- Establece la esquina de fuente de luz para controlar dónde cae el resalte.
- Ajusta el tamaño, radio de borde, distancia, intensidad y desenfoque con los deslizadores.
- Activa colores de sombra manuales si quieres anular los tonos claro y oscuro derivados.
- Copia el CSS y pégalo en tu elemento.