Generador de glassmorphism

El glassmorphism es un estilo de interfaz que hace que un elemento parezca vidrio esmerilado: un panel semitransparente que desenfoca todo lo que hay detrás de él, rematado con un borde fino luminoso y una sombra suave para dar profundidad. Lo ves en macOS Big Sur, las superficies acrílicas de Windows 11 y las tarjetas de inicio de sesión modernas. Los tres ingredientes son un relleno de fondo translúcido, un blur de fondo y un borde sutil de 1px, por ejemplo: background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).

Dale al elemento un fondo semitransparente y un blur de fondo, luego añade un borde fino. Un punto de partida sólido es: background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2). La clave es que el relleno de fondo sea parcialmente transparente para que el blur detrás se vea. Arrastra los controles de arriba para ajustarlo y copia el CSS exacto.

backdrop-filter aplica un efecto gráfico — más comúnmente blur() — al área que hay detrás de un elemento, no al contenido propio del elemento. Así que backdrop-filter: blur(10px) desenfoca todo lo que se renderiza detrás del contenedor, lo que crea el efecto de vidrio esmerilado. También puedes encadenar filtros, por ejemplo: backdrop-filter: blur(10px) saturate(150%) para desenfocar y potenciar el color detrás del vidrio a la vez. Solo se aprecia si el fondo propio del elemento es al menos parcialmente transparente.

El vidrio esmerilado es glassmorphism con un blur más intenso y un tinte ligeramente más opaco. Prueba: background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px. Sube el blur a 14-20px y la opacidad del tinte a un 20-30% aproximadamente para que la superficie se lea como 'esmerilada' en lugar de transparente. El preajuste Tarjeta esmerilada de UtiloKit establece estos valores al instante, así que puedes partir de ahí y ajustar.

Sí — backdrop-filter es compatible con todos los navegadores principales actuales (Chrome, Edge, Firefox y Safari). Safari lo soporta desde hace años con el prefijo -webkit-backdrop-filter, así que incluye siempre ambas líneas: -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). El generador de glassmorphism de UtiloKit genera automáticamente la versión con prefijo. Los navegadores muy antiguos que no lo soportan simplemente muestran tu fondo semitransparente plano, lo que degrada de forma elegante.

Las tres causas más frecuentes son: (1) no hay nada detrás del elemento que desenfocar — backdrop-filter solo afecta al contenido renderizado detrás de él, así que colócalo sobre una imagen o un degradado; (2) el fondo propio del elemento es completamente opaco — usa un relleno rgba() como rgba(255,255,255,0.18) para que el blur se vea a través; (3) olvidaste el prefijo -webkit-backdrop-filter para Safari. Ten en cuenta también que un ancestro con filter, transform o will-change puede crear un bloque contenedor que rompe el efecto por completo.

Combina las utilidades backdrop-blur con un fondo translúcido y un borde tenue. Por ejemplo: class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg". Usa backdrop-saturate-150 para potenciar el color detrás. Para valores exactos, cambia la salida de arriba a la pestaña Tailwind — emite clases de valor arbitrario como backdrop-blur-[10px] bg-[#ffffff]/18 border-[1px] border-[#ffffff]/30 rounded-[16px] que coinciden exactamente con tus controles.

El glassmorphism usa transparencia y un blur de fondo para que el elemento parezca vidrio esmerilado flotando sobre el contenido. El neumorphism (soft UI) es lo opuesto: elementos opacos del mismo color que la página, con un aspecto 3D extruido logrado con sombras pareadas claras y oscuras — por ejemplo box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff. El glassmorphism necesita un fondo colorido para lucir; el neumorphism necesita un fondo plano de un solo color para funcionar.

Para la mayoría de las tarjetas, un blur de fondo de 8-16px se ve bien. Usa unos 5-8px para un vidrio ligero, apenas esmerilado; 10-16px para una tarjeta o modal típico; y 16-25px para una navbar o superposición de vidrio esmerilado intenso. Con más blur, sube ligeramente la opacidad del tinte para que el texto siga siendo legible. El control de Blur va de 0 a 40px para que encuentres el punto ideal para tu imagen de fondo específica sin tener que adivinar.

La legibilidad depende del contraste entre el texto y el fondo desenfocado. Sube la opacidad del tinte hasta aproximadamente un 25-40% para que la superficie sea menos transparente, añade backdrop-saturate para atenuar los colores intensos detrás, y elige un color de texto con un contraste fuerte — texto blanco sobre vidrio de tinte oscuro, o texto oscuro sobre tinte claro. Apunta a una relación de contraste WCAG de 4.5:1 para el texto del cuerpo, y evita colocar texto pequeño sobre la parte más colorida de la imagen de fondo.

Puede serlo, pero requiere cuidado. La transparencia hace que el contraste sea impredecible porque el color detrás del vidrio cambia constantemente, lo que puede bajar el texto por debajo del mínimo WCAG de 4.5:1. Usa una opacidad de tinte suficientemente alta (30%+), prueba el texto contra la parte más saturada del fondo, y no confíes solo en el blur para separar el contenido. Respeta también a los usuarios que activan prefers-reduced-transparency proporcionando un fallback más opaco en tu CSS.

Glassmorphism.com (de Michal Malewicz) te da un punto de partida rápido para un estilo, pero no te permite subir tu propia imagen de fondo, controlar la saturación ni exportar clases de Tailwind. Glass UI (glass-ui.com) es igualmente limitado — vista previa con un solo fondo, sin salida de Tailwind, sin enlace compartible. UtiloKit te permite soltar tu propia imagen, ajustar cada parámetro incluyendo saturación e intensidad de sombra, obtener salida en CSS y Tailwind, y compartir la configuración exacta mediante una URL. Todo funciona en el navegador sin subir nada a ningún servidor.

Coloca un contenedor sobre una imagen de fondo o un degradado, luego aplica el CSS generado a la tarjeta. Ejemplo mínimo: dale al elemento padre un fondo, luego aplica al hijo: background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px. Copia el fragmento HTML listo en la salida de arriba — incluye el marcado y un bloque de estilos que puedes pegar directamente en tu página sin configuración adicional.

Sí. El generador de glassmorphism de UtiloKit es totalmente responsive y funciona en Safari en iPhone, Chrome en Android y cualquier navegador móvil moderno. Los controles son táctiles, la vista previa en vivo se actualiza en tiempo real, y copiar el CSS o la salida de Tailwind funciona desde el portapapeles de tu teléfono igual que en un escritorio. Como todo funciona en el navegador sin ningún servidor de por medio, no hay nada que instalar — simplemente abre la página y empieza a diseñar.

Sí — haz clic en el botón Copiar enlace y todos los valores de tus controles se codifican directamente en la URL. Comparte ese enlace con un diseñador o desarrollador y abrirá tu configuración exacta: mismo blur, mismo color y opacidad del tinte, misma saturación, mismos ajustes de borde y sombra. Sin cuenta, sin archivo que exportar. Este es uno de los puntos donde glassmorphism.com y Glass UI se quedan cortos — ninguno admite enlaces de configuración compartibles.