Generador de glassmorphism CSS (efecto cristal esmerilado)
Genera un efecto de glassmorphism CSS (cristal esmerilado) con vista previa y código listo para copiar.
Glass
🔒 100 % en el cliente — no se envía ningún dato
Crea un efecto de glassmorphism de cristal esmerilado y copia el CSS listo para pegar (backdrop-filter, transparencia, desenfoque, borde). Ajusta el desenfoque, la opacidad y el radio en tiempo real con una vista previa en vivo. Sin envío de datos: todo se genera en tu navegador.
What is it for?
- ▸ Diseñar tarjetas y modales de cristal esmerilado
- ▸ Prototipar rápidamente una interfaz translúcida y moderna
- ▸ Ajustar el desenfoque y la opacidad con vista previa instantánea
- ▸ Copiar un CSS limpio y compatible con los navegadores
FAQ
¿Qué propiedad CSS crea el efecto de cristal?
Es principalmente backdrop-filter: blur(), combinado con un fondo semitransparente y un borde ligero.
¿Funciona el glassmorphism en todos los navegadores?
La mayoría de los navegadores modernos lo admiten; un prefijo -webkit-backdrop-filter mejora la compatibilidad.
¿Puedo usar el CSS generado de forma gratuita?
Sí, el código es de uso libre en tus proyectos personales o comerciales.