Generador de neumorphism

Funciones

• Color de fondo ajustable, del que se derivan las dos sombras (mismo tono, distinta luminosidad)
• Distancia del desplazamiento, radio del desenfoque e intensidad, todos ajustables
• Saliente y hundido en un solo interruptor: al hundir se invierten las dos sombras
• Radio de las esquinas ajustable
• El fondo de la previa es del mismo color que el elemento, que es la premisa del efecto
• Debajo aparece la regla CSS completa lista para copiar, con el selector `.soft`
• Los parámetros se recortan y los colores se validan, sin producir CSS inválido
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Elige primero el fondo: el efecto depende por completo de él, y un gris azulado claro es la elección típica
2. Ajusta la distancia y el desenfoque y observa la sensación de relieve
3. Regula la intensidad para el peso de las sombras: demasiada ensucia la página
4. Marca «hundido» para ver el estado pulsado y luego copia el CSS

Preguntas frecuentes

¿Por qué no me dejas elegir los colores de sombra?

Porque con equivocarse un poco, el efecto desaparece. Esos dos colores tienen que cumplir dos condiciones: derivarse del mismo fondo y compartir el tono — si no, no parecen la luz sobre un mismo material, sino dos parches de color que no pegan. La forma manual habitual es "sumar 40 a cada canal RGB", que además cambia el tono (se nota sobre todo en fondos cálidos, donde sale un color frío y blanquecino). Por eso aquí se trabaja en HSL moviendo solo la luminosidad y ajustando la saturación a la vez, con el tono siempre igual: tú solo das un color de fondo.

¿Hasta qué punto es grave el problema de accesibilidad de este estilo?

Bastante, y es un coste propio del estilo, no una mala implementación. Su belleza viene de que "el elemento y el fondo son casi del mismo color", y lo que pide la accesibilidad es justo "que el elemento y el fondo tengan contraste suficiente": los dos chocan de frente. En la práctica: quien ve poco o usa la pantalla a plena luz no distingue qué es un botón. Hay tres remedios posibles: no usar solo neumorphism en las acciones críticas (enviar, borrar), sino añadir un borde o un texto claro; dejar a los elementos pulsables una zona de clic lo bastante grande (44×44pt o más); y reservar el estado «hundido» para `:active`, de modo que el retorno al pulsar sea más fuerte que en reposo.

¿Por qué el fondo de la previa es igual que el elemento?

Porque es la premisa de todo el efecto: da por supuesto que el elemento y lo que lo rodea son el mismo material, con la luz entrando desde arriba a la izquierda. Cuando el color de alrededor es distinto, los cantos de las dos sombras se delatan — parece una pegatina y no algo "empujado hacia fuera" de esa superficie. Por eso la previa de esta herramienta sigue al color de fondo, y en tu proyecto real también tienes que asegurarte de que el elemento se apoya sobre un fondo de su mismo color; si no, el efecto no se sostiene.

¿Dónde uso el estado hundido y dónde el saliente?

El saliente (por defecto) va en lo que se puede pulsar: botones, tarjetas, el estado apagado de un interruptor. El hundido sirve para dos cosas: como estado ya pulsado (`:active`, que contrasta con el saliente y da el retorno más natural), y como contenedor que se hunde hacia dentro, como un campo de texto o la ranura de un progreso — elementos que por su propia semántica ya están "metidos". Esta herramienta cambia entre los dos estados con un clic, así que puedes ver la diferencia antes de decidir dónde va cada uno.

¿Para qué tipo de proyecto encaja este estilo?

Encaja en interfaces con pocos elementos, mucho aire y poca densidad de información: paneles de ajustes, consolas, reproductores, cuadros de mando, esos escenarios de "unos botones grandes y una zona despejada". Al revés, no encaja en interfaces densas: tablas, listas y paneles de administración se apoyan justamente en bordes y separadores para marcar la jerarquía, y el neumorphism prescinde de ellos, con lo que todo se mezcla. Esa es también la razón de que, tras ponerse de moda hacia 2020, aparezca sobre todo en maquetas de concepto.