Genere visualmente efectos CSS de vidrio esmerilado para su interfaz de usuario.
Ajusta tres controles deslizantes — desenfoque, transparencia y opacidad del borde — y observa cómo se actualiza el efecto de vidrio esmerilado en tiempo real. Cuando estés conforme, copia el CSS listo para usar.
Usa los tres controles para ajustar la cantidad de desenfoque, la transparencia y la opacidad del borde. El cuadro de vista previa se actualiza en tiempo real. Copia el CSS generado del cuadro de texto al final del panel.
El glassmorphism requiere un fondo de colores o una imagen detrás del elemento. En un fondo blanco liso, el desenfoque no tiene nada sobre lo que actuar y el efecto no es visible.
Sí — en todos los navegadores modernos (Chrome, Firefox, Safari, Edge). El CSS generado incluye automáticamente el prefijo -webkit- para Safari.
Esta herramienta funciona completamente en tu navegador. Nada de lo que escribes o pegas se envía a ningún servidor — todo el procesamiento ocurre localmente en tu dispositivo.