Generador de Glassmorphism

El glassmorphism es una tendencia moderna de diseño UI que crea una apariencia de vidrio esmerilado combinando un fondo semitransparente, un filtro de desenfoque de fondo, un borde sutil y a veces una sombra suave. Da a los elementos una apariencia en capas y con profundidad, popular en páginas de aterrizaje, paneles y tarjetas.

La propiedad CSS backdrop-filter aplica efectos gráficos como el desenfoque al área detrás de un elemento. Cuando se combina con un fondo semitransparente, produce el aspecto de vidrio esmerilado. El prefijo -webkit-backdrop-filter es necesario para compatibilidad completa con Safari.

backdrop-filter es compatible con todos los navegadores modernos: Chrome, Edge, Firefox (v103+), Safari y Opera. El prefijo -webkit- cubre versiones antiguas de Safari. Internet Explorer no admite esta propiedad. El CSS generado incluye tanto la versión estándar como la con prefijo para máxima compatibilidad.

Un valor de desenfoque entre 8px y 20px generalmente produce el mejor aspecto de vidrio esmerilado. Valores inferiores a 4px parecen demasiado nítidos, mientras que valores superiores a 30px pueden verse excesivamente desenfocados. El valor ideal depende de la complejidad del fondo — los fondos muy detallados se benefician de valores de desenfoque más altos.

El glassmorphism requiere un fondo colorido o complejo para ser visible. Si el fondo detrás de la tarjeta es blanco liso o un solo color sólido, el desenfoque y la transparencia no tienen contenido visible para mezclar. Usa las opciones de degradado de fondo o imagen para añadir un fondo colorido a la vista previa.

Copia el código CSS usando el botón Copiar CSS y pégalo en tu hoja de estilos. Aplica la clase .glass-card a tu elemento HTML. Asegúrate de que el contenedor padre tenga un fondo colorido o una imagen de fondo posicionada detrás de la tarjeta de vidrio para que el efecto aparezca correctamente.

La opacidad del vidrio controla qué tan transparente es el fondo de la tarjeta en sí — valores más bajos permiten que más del fondo se vea a través. La opacidad del borde controla independientemente la visibilidad del resaltado del borde de la tarjeta, que suele ser una línea blanca semitransparente que da al borde del vidrio un brillo realista.

¡Sí! Activa el interruptor de Degradado de Fondo en la configuración del vidrio. Luego puedes elegir dos colores y un ángulo para crear un fondo de degradado lineal para la tarjeta de vidrio. El control deslizante de opacidad se aplica a ambas paradas del degradado, manteniendo la transparencia del vidrio esmerilado.

La herramienta incluye seis presets: Vidrio Claro (escarcha blanca clásica), Vidrio Oscuro (panel semitransparente oscuro), Esmerilado (desenfoque intenso, alta opacidad), Colorido (vidrio degradado púrpura-rosa), Mínimo (capa de vidrio apenas visible) y Vibrante (vidrio cian-teal sobre un fondo llamativo).

Cambia el interruptor de Escena de Fondo a URL de Imagen y pega un enlace directo a una imagen. La vista previa mostrará tu imagen como el fondo detrás de la tarjeta de vidrio. Las URLs de imágenes de acceso público funcionan mejor.

backdrop-filter puede ser intensivo en GPU, especialmente con valores de desenfoque altos o muchos elementos de vidrio en la misma página. Para el rendimiento, mantén los valores de desenfoque razonables (menos de 20px), evita apilar muchas capas de vidrio y prueba en dispositivos de menor potencia.

Por supuesto. El glassmorphism funciona bien en botones, barras de navegación, barras laterales, modales, tooltips y cualquier elemento UI flotante. Mantén el radio del borde adecuado para el tipo de elemento y asegura suficiente contraste de color entre el texto y el fondo de vidrio para la legibilidad.