Generador CSS de glassmorphism
Ajuste el desenfoque, la transparencia, el borde y la sombra para crear un efecto de cristal esmerilado (glassmorphism) y copie después el CSS generado. Vista previa en directo en su navegador, sin enviar ningún dato a un servidor.
Cómo funciona
El glassmorphism combina tres propiedades CSS: un fondo semitransparente, un desenfoque del fondo (backdrop-filter: blur()) que esmerila lo que se encuentra detrás del elemento y un borde fino y claro que simula un reflejo en el canto del "cristal". Ajuste los controles deslizantes para encontrar el equilibrio entre la legibilidad del texto y el efecto visual, y copie después el CSS para aplicarlo a sus tarjetas, barras de navegación o ventanas modales.
¿Funciona el glassmorphism en todos los navegadores?
La propiedad backdrop-filter es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge) y el código generado incluye el prefijo -webkit-backdrop-filter para mejorar la compatibilidad con Safari. En navegadores muy antiguos, el elemento sigue siendo visible, pero sin el efecto de desenfoque.
¿Sobre qué tipo de fondo se aprecia más este efecto?
El glassmorphism se aprecia sobre todo con un fondo con contraste o color (degradado, imagen, ilustración) situado detrás del elemento: sobre un fondo liso y claro, el efecto de desenfoque pasa desapercibido. Pruebe siempre la legibilidad del texto colocado sobre el elemento de cristal antes de usarlo en una interfaz real.
Generación y vista previa 100% locales: el CSS se calcula en su navegador a partir de sus ajustes, sin enviar ningún dato.