Generador glassmorphism CSS
Crea un efecto de vidrio esmerilado (glassmorphism) en CSS: desenfoque, transparencia, saturación, borde y sombra, con vista previa sobre un fondo colorido o tu foto.
- Gratis
- Sin registro
- Sin subir archivos
- Windows, Mac, Android, iPhone
Cargando la herramienta…
Acerca de esta herramienta
Ajusta en directo un efecto de vidrio esmerilado (glassmorphism): intensidad del desenfoque, opacidad y tinte del vidrio, saturación, borde luminoso, radio de las esquinas y sombra. Pruébalo sobre fondos coloridos o tu propia foto; el código CSS incluye la versión para Safari.
Cuándo usarla
Tarjetas y paneles de interfaz
Una tarjeta esmerilada sobre un fondo colorido da un aspecto moderno y ligero, muy usado en paneles de control y páginas de aterrizaje.
Barra de navegación transparente
Una barra de menú de vidrio deja entrever el contenido que se desplaza y sigue siendo legible.
Ventanas modales
Desenfocar el fondo centra la atención en el cuadro de diálogo sin separar del todo al visitante de la página.
Cómo se usa
- Elige un fondo colorido o tu propia foto.
- Ajusta el desenfoque, la opacidad, el tinte y el borde del vidrio.
- Copia el código CSS de la tarjeta.
Cómo funciona
El código combina un fondo rgba() semitransparente, backdrop-filter con blur() y opcionalmente saturate(), un borde blanco translúcido que imita el canto del vidrio, un radio de esquinas y una sombra suave.
La vista previa la genera tu navegador con exactamente el mismo código: lo que ves es lo que verán tus visitantes. Tu foto de fondo se queda en tu dispositivo.
Consejos para un mejor resultado
- El efecto solo se ve sobre un fondo contrastado: formas de colores, un degradado o una foto.
- Un desenfoque de 10 a 16 px y una opacidad del 15 al 25 % dan el aspecto más clásico.
- Comprueba la legibilidad del texto en la tarjeta: aumenta la opacidad sobre fondos cargados.
- Una saturación superior al 100 % aviva los colores vistos a través del vidrio.
Problemas frecuentes y soluciones
El desenfoque no se ve
backdrop-filter solo funciona si el fondo del elemento es transparente o semitransparente y hay algo detrás.
Funciona en todas partes menos en Safari
Comprueba que está la línea -webkit-backdrop-filter: Safari la necesita.
El texto se lee mal
Aumenta la opacidad del fondo, añade una sombra al texto o elige un fondo más tranquilo.
Preguntas frecuentes
¿Qué es el glassmorphism?
Un estilo de interfaz en el que los paneles parecen vidrio esmerilado: semitransparentes, desenfocan lo que hay detrás. Lo popularizaron macOS Big Sur y Windows 11.
¿Qué propiedad CSS crea el efecto?
backdrop-filter: blur() desenfoca el fondo detrás del elemento. Se usa con un fondo semitransparente; si no, el desenfoque no se ve.
¿Funciona en Safari?
Sí, con el prefijo -webkit-backdrop-filter, ya incluido en el código generado. Todos los navegadores recientes admiten el efecto.
¿El efecto ralentiza la página?
El desenfoque lo calcula la tarjeta gráfica. En pocos elementos no se nota; evítalo en zonas animadas muy grandes.
Búsquedas relacionadas
¿Sigues atascado?
Pregunta en el foro: la categoría, la herramienta, la ficha de tu dispositivo y el resultado de la prueba se rellenan solos.