Generador de Glassmorphism CSS
Diseña un efecto de vidrio (glassmorphism) con vista previa en vivo — ajusta desenfoque, transparencia, tono y borde, y copia el CSS.
667 visitas
¿Qué Es el Glassmorphism?
El glassmorphism es el aspecto de vidrio esmerilado: un panel semitransparente que desenfoca lo que hay detrás usando backdrop-filter: blur(), combinado con un borde y una sombra sutiles. Funciona mejor sobre fondos coloridos o con imágenes — en un fondo liso el desenfoque es invisible.
Mueve los controles deslizantes y observa la vista previa en vivo; el CSS de abajo se actualiza al instante y está listo para copiar. No olvides el prefijo -webkit-backdrop-filter para Safari, que el código generado ya incluye.
Preguntas Frecuentes
¿Por qué mi efecto de vidrio se ve plano?
backdrop-filter solo se nota sobre un fondo variado — coloca el elemento sobre un degradado o una imagen. Revisa también la compatibilidad del navegador: Safari necesita el prefijo -webkit- (incluido en el código generado).
¿backdrop-filter afecta el rendimiento?
El desenfoque se acelera por GPU pero no es gratis. Úsalo en pocas superficies clave (tarjetas, encabezados) en lugar de docenas de elementos, y mantén radios de desenfoque moderados en móvil.
¿Qué valores dan un look de vidrio clásico?
Un buen punto de partida: fondo blanco al 15-25% de opacidad, desenfoque de 8-12px, borde de 1px con 30% de blanco y radio de 16px — los valores predeterminados de este generador.
Herramientas Similares
Reportar un Problema
Generador de Glassmorphism CSS