Generador de glassmorphism (vidrio esmerilado)
Ajusta el desenfoque, la transparencia y el borde hasta que la tarjeta parezca vidrio sobre el fondo. Cambia el fondo para probar y copia el CSS.
Cómo usarEfecto de vidrio esmerilado
Disponible en: 
Generador de glassmorphism (vidrio esmerilado): para qué sirve
Ajusta el desenfoque, la transparencia, la saturación, el color del vidrio, el borde y las esquinas. La vista previa muestra la tarjeta sobre un degradado con formas, un paisaje, un fondo oscuro o tu propia foto.
El CSS sale con backdrop-filter y el prefijo -webkit- para Safari, más un color de respaldo más opaco para navegadores que no admiten el desenfoque.
Cómo usar
- Ajusta desenfoque, transparencia y borde.
- Cambia el fondo de la vista previa o usa tu foto.
- Copia el CSS y aplica la clase vidrio.
Cuándo usar
- Encabezados y menús con fondo de vidrio.
- Tarjetas destacadas sobre fotos.
- Interfaces con un aspecto moderno.
Preguntas frecuentes
¿Por qué no se ve el vidrio?
El efecto solo aparece si hay algo colorido o con detalles detrás de la tarjeta: una foto, un degradado o formas. Sobre un fondo blanco liso, el vidrio esmerilado parece solo una tarjeta blanca.
¿Afecta el rendimiento?
Un poco: el navegador tiene que desenfocar lo que está detrás. Úsalo en pocos elementos (encabezado, tarjetas destacadas) y evítalo en listas largas o en celulares más sencillos.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.