Generador CSS de glassmorphism — vidrio esmerilado
Crea tarjetas de vidrio esmerilado (glassmorphism) con sliders de desenfoque, transparencia, saturación, borde y radio: vista previa y CSS, en tu navegador.
🔒 Funciona por completo en tu navegador. Tu entrada y salida no se envían a ningún servidor ni se guardan: totalmente privado.
Acerca de esta herramienta
Este generador de glassmorphism crea ese aspecto de cristal esmerilado que ves en el diseño moderno de apps y webs, y luego te entrega el CSS para copiar. Ajusta el desenfoque, la transparencia, el tinte de fondo, el borde y el redondeo de esquinas, y un panel en vivo muestra el efecto flotando sobre un fondo colorido para que juzgues la legibilidad. Por dentro se apoya en backdrop-filter para desenfocar lo que haya detrás del elemento. Cuando el panel quede bien, copia las reglas generadas en tu hoja de estilos, y todo se ejecuta en tu navegador.
Preguntas frecuentes
¿Cómo funciona en realidad el efecto de cristal esmerilado?
Superpone tres ingredientes: un fondo semitransparente para que asome algo de color, un desenfoque con backdrop-filter que esmerila lo que haya detrás del panel y un borde claro y sutil que recoge el canto como el cristal real. El desenfoque es la clave: suaviza el contenido de debajo, no el propio texto del panel. Como el efecto toma lo que tiene detrás, el glassmorphism luce mejor flotando sobre un fondo colorido o fotográfico que sobre uno plano.
¿Funciona backdrop-filter en todos los navegadores?
Backdrop-filter es compatible con las versiones actuales de todos los navegadores principales, pero con matices. Safari necesita el prefijo -webkit-backdrop-filter, que el generador incluye por ti, y algunos navegadores antiguos ignoran la propiedad por completo: allí el panel muestra solo su fondo semitransparente, sin desenfoque. Un desenfoque intenso también puede penalizar el rendimiento en dispositivos modestos. Conviene mantener el texto legible aunque el esmerilado no se renderice, para que el diseño se degrade con elegancia.
¿El CSS generado está listo para usar y la herramienta funciona localmente?
Sí en ambos casos. La herramienta genera un conjunto completo de reglas —fondo, desenfoque, borde y radio, con el prefijo -webkit- incluido— que puedes pegar directamente en tu hoja de estilos y aplicar a cualquier panel o tarjeta. Todo se genera localmente en tu navegador mientras ajustas los controles, así que tu diseño y tus ajustes nunca se suben, y la vista previa sigue funcionando incluso sin conexión una vez cargada la página.