El neumorfismo (o interfaz de usuario suave) ha sido una tendencia masiva en el diseño web. Crea una hermosa apariencia de plástico extruido que se siente muy premium y moderna.
Sin embargo, codificar botones Neumorphic desde cero es un gran dolor de cabeza.
Las matemáticas detrás de las sombras
Un botón Neumórfico perfecto requiere dos cajas de sombras perfectamente equilibradas: 1. Una sombra clara en la parte superior izquierda para simular una fuente de luz. 2. Una sombra oscura en la parte inferior derecha para simular profundidad.
Si el contraste es demasiado alto, parece áspero. Si es demasiado bajo, el botón desaparece en el fondo.
```css / La fórmula clásica del Neumorfismo / antecedentes: #e0e5ec; sombra de cuadro: 9px 9px 16px rgb (163,177,198,0.6), -9px -9px 16px rgba (255,255,255, 0,5); ```
La forma más rápida
En lugar de modificar los valores CSS durante horas en DevTools, puede usar nuestro [Generador de botones CSS](/en/css-button-generator).
Nuestra herramienta le permite marcar visualmente el radio de borde, el color y la intensidad de sombra exactos que desee. Una vez que se vea perfecto en la pantalla, simplemente haga clic en "Copiar CSS" y suéltelo en su componente u hoja de estilo de React.
¡Deja de escribir sombras CSS sin procesar y comienza a generarlas visualmente!