Generador CSS de glassmorphism
Genera CSS para paneles de cristal esmerilado o superficies neumórficas suaves desde algunos controles deslizantes.
Generador CSS de glassmorphism
Crea una regla CSS completa y lista para pegar destinada a un panel de cristal esmerilado o una superficie neumórfica suave sin escribir ningún valor a mano. Elige glassmorphism para una tarjeta translúcida que desenfoca lo que hay detrás — el aspecto usado en paneles de control, formularios de inicio de sesión y modales modernos — o neumorphism para una superficie que parece estar moldeada a partir del mismo material que su fondo, usando un par de sombras suaves opuestas en lugar de transparencia.
Las opciones se asignan directamente a las propiedades que escribe la herramienta. En modo cristal, la opacidad de la superficie y la intensidad del desenfoque controlan el alfa de fondo y el desenfoque de backdrop-filter, mientras que el grosor del borde y el brillo del borde establecen un borde delgado y semi-transparente que mantiene el panel legible contra fondos ocupados. La distancia de la sombra y la suavidad dan forma a la sombra proyectada debajo del panel, y el conmutador de forma la invierte a una sombra receso para un aspecto recesado. En modo neumorphism, los mismos valores de distancia de sombra y suavidad impulsan una sombra clara y una sombra oscura calculadas a partir de su color de superficie, elevadas o presionadas según la forma que elija. El redondeo de esquinas y una variante de modo oscuro se aplican a ambos estilos.
Porque una superficie esmerilada o levemente sombreada puede caer en un tono medio que es difícil de leer con texto negro o blanco, la herramienta verifica el contraste resultante y añade un comentario de advertencia breve encima del CSS cuando ningún color de texto se leerá cómodamente por encima de WCAG AA — un empujón para ajustar el color de la superficie u opacidad en lugar de una suposición.
Todo se ejecuta localmente en su navegador mientras mueve los controles deslizantes — sin herramienta de diseño, sin cuenta y nada enviado a un servidor. Copie el CSS directamente a su hoja de estilos, descárguelo como archivo .txt o envíe el resultado nuevamente a la entrada para seguir ajustándolo.