Este generador de glassmorphism CSS crea el popular efecto de cristal esmerilado con vista previa en vivo. Ajusta el desenfoque, la transparencia, el borde y la saturación, y copia el código listo para usar. Funciona en tu navegador, sin registro y en español.
Cómo crear el efecto cristal
- Ajusta el desenfoque y la transparencia: son las dos claves del efecto.
- Afina el radio del borde, su opacidad y la saturación para dar más profundidad.
- Copia el CSS y aplícalo a tu elemento.
¿Qué es el glassmorphism?
Es un estilo visual que simula un panel de cristal esmerilado sobre el fondo: combina un fondo semitransparente con backdrop-filter: blur() y un borde claro sutil. Necesita un fondo con color o imagen detrás para que el efecto se aprecie; sobre un fondo plano no se nota. ¿Más recursos CSS? Visita nuestras herramientas CSS.
Preguntas frecuentes
¿Funciona en todos los navegadores?
backdrop-filter está soportado por los navegadores modernos. Se incluye el prefijo -webkit- para mejorar la compatibilidad; en navegadores muy antiguos el panel se verá simplemente semitransparente, sin desenfoque.
¿Por qué no veo el efecto?
Porque necesita algo detrás. Aplica el cristal sobre un fondo con imagen o degradado; sobre un color plano no hay nada que desenfocar.
¿Afecta al rendimiento?
El desenfoque de fondo es costoso de renderizar. Úsalo con moderación, sobre todo en móviles y en elementos que se animan.
