Generador de neumorfismo CSS

El generador de neumorfismo CSS crea elementos de interfaz de usuario suaves, el estilo en el que una forma se ve suavemente extruida o presionada en el fondo usando sombras claras y oscuras emparejadas. Estableces el color de la superficie, la distancia de la sombra, el desenfoque, la intensidad del contraste, el radio de la esquina y la forma, miras una vista previa en vivo y copias del CSS exacto.

El neumorfismo funciona colocando dos cajas de sombra sobre un elemento que comparte su fondo con la página: una sombra más clara en la parte superior izquierda y una más oscura en la parte inferior derecha. Hacer que los dos colores de sombra y las compensaciones se vean convincentemente suaves es quisquilloso a mano. Esta herramienta deriva automáticamente los tonos claros y oscuros de su color de superficie, por lo que el efecto siempre se ve equilibrado.

Todo se ejecuta en su navegador. Elija un preset, ajuste los controles deslizantes, cambie entre formas planas, cóncavas, convexas y presionadas, y copie el CSS. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.

Vale la pena utilizar el neumorfismo con ojos claros sobre su principal debilidad, que es la accesibilidad. El estilo funciona colocando una sombra clara y una sombra oscura en una superficie casi del mismo color que su fondo, por lo que el borde de un control se define por una diferencia de un pequeño porcentaje en luminancia. Eso parece tan elegante para algunos espectadores e invisible para cualquiera con sensibilidad de contraste reducida, en una pantalla tenue o al aire libre. Falla WCAG 1.4.11, que exige una proporción de 3:1 en el límite de un componente interactivo. El compromiso habitual es mantener el estilo de las superficies decorativas y dar a los elementos genuinamente interactivos un borde real o un estado de enfoque claro. Los colores de las sombras se derivan aquí del color de la superficie, por lo que una superficie oscura produce un par correctamente invertido en lugar de uno gris.