Generador de Glassmorphism
Crea efectos CSS de glassmorfismo con controles visuales. Ajusta opacidad, desenfoque y saturacion para UI de vidrio esmerilado.
Caracteristicas principales
- Opacidad, desenfoque y saturación ajustables
- Selección de color de tinte personalizado
- Vista previa en vivo sobre fondos de degradado
- Salida CSS lista para copiar
Guide
El glassmorphism es un estilo de diseño visual donde los elementos de la interfaz aparecen como paneles de cristal esmerilado flotando sobre un fondo colorido. El efecto se apoya en tres propiedades CSS trabajando juntas: transparencia de fondo (rgba o hsla con alfa bajo), desenfoque de fondo (backdrop-filter: blur()) y un borde o sombra sutiles que definen el borde del panel. El estilo ganó prominencia en 2020 con macOS Big Sur de Apple y desde entonces se ha convertido en un elemento básico del diseño moderno de interfaz web y móvil. Esta guía cubre la implementación técnica, las implicaciones de rendimiento, los principios de diseño y los patrones prácticos para usar glassmorphism de forma eficaz. El CSS básico para un panel de glassmorphism exige tres declaraciones. Primero, un fondo semitransparente: background: rgba(255, 255, 255, 0.15) para un efecto de cristal claro o background: rgba(0, 0, 0, 0.25) para un efecto de cristal oscuro. Segundo, un desenfoque de fondo: backdrop-filter: blur(12px). Tercero, un borde que capte la luz: border: 1px solid rgba(255, 255, 255, 0.2). La combinación de fondo transparente, desenfoque de fondo y borde luminoso crea la ilusión de cristal esmerilado. Sin ninguno de estos tres componentes, el efecto fracasa. Un fondo transparente sin desenfoque parece una superposición de color. Un desenfoque sin transparencia no muestra nada detrás del elemento. Y sin un borde, los bordes del panel desaparecen en el fondo. La propiedad backdrop-filter aplica efectos gráficos al área detrás de un elemento. Soporta las mismas funciones de filtro que la propiedad CSS filter: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() y drop-shadow(). Para glassmorphism, blur() es la función principal. El radio de desenfoque controla la intensidad del efecto esmerilado: blur(4px) crea una suavidad sutil, blur(12px) crea un esmerilado medio, y blur(24px) crea un esmerilado pesado donde los detalles del fondo apenas son visibles. Puedes combinar múltiples funciones: backdrop-filter: blur(12px) saturate(180%) añade viveza de color al fondo desenfocado, haciendo que los colores detrás del cristal parezcan más vívidos. El valor del radio de desenfoque determina cuán cristalino frente a sólido parece el panel. Los valores más bajos (4px a 8px) mantienen más detalle del fondo y se sienten más ligeros. Los valores medios (10px a 16px) crean el aspecto clásico de cristal esmerilado. Los valores más altos (20px+) oscurecen el fondo casi por completo, momento en el que pierdes la metáfora del cristal y el panel parece una superficie translúcida sólida. Para la mayoría de las aplicaciones de interfaz, de 8px a 16px alcanza el equilibrio correcto entre interés visual y legibilidad del contenido. Prueba tu radio de desenfoque elegido con tu contenido de fondo real para verificar que el efecto funciona como se pretende. El alfa del fondo (transparencia) funciona en tensión con el radio de desenfoque. Un fondo con alfa muy bajo (0,05 a 0,10) muestra más del fondo desenfocado, creando una sensación más ligera y transparente. Un fondo con alfa más alto (0,25 a 0,40) oscurece más del fondo, creando una sensación más sólida y opaca. La combinación correcta depende de lo que haya detrás del panel de cristal. Sobre un fondo ocupado y colorido, un alfa más alto y un desenfoque más fuerte aseguran que el texto siga siendo legible. Sobre un fondo simple y apagado, un alfa más bajo y un desenfoque más ligero crean un efecto más elegante. No hay una única combinación correcta. Cada contexto de diseño exige pruebas para encontrar el equilibrio entre efecto visual y usabilidad. El borde y la sombra definen el borde del panel de cristal y son esenciales para que la ilusión funcione. Sin un borde, el panel se mezcla con su entorno y pierde su cualidad dimensional. Un borde fino usando rgba(255, 255, 255, 0.18) en un panel de cristal claro o rgba(255, 255, 255, 0.08) en un panel de cristal oscuro simula la luz atrapando el borde del cristal real. Box-shadow añade profundidad: box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) para una sombra ligera o box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) para una elevación más dramática. La sombra refuerza que el panel flota sobre el fondo. Algunas implementaciones añaden una segunda sombra interior para dimensión adicional. El rendimiento de backdrop-filter es la consideración más importante para uso en producción. El desenfoque de fondo es intensivo para la GPU porque el navegador debe renderizar el contenido detrás del elemento, aplicar el filtro de desenfoque a ese contenido renderizado y luego componer el resultado desenfocado bajo el elemento semitransparente. Esto ocurre en cada fotograma si algo detrás del panel de cristal cambia (scroll, animaciones, vídeo). En GPUs de escritorio de gama alta, esto es fluido. En dispositivos móviles de gama baja, puede causar caídas significativas de fotogramas y consumo de batería. El coste de rendimiento escala con el radio de desenfoque y el área que se desenfoca. Una pequeña tarjeta de cristal con blur(8px) es mucho más barata que una barra de navegación de cristal de ancho completo con blur(20px). Las estrategias de optimización de rendimiento incluyen limitar el número de elementos de cristal visibles a la vez (evita poner paneles de cristal en cada tarjeta de una cuadrícula de 50 elementos), reducir el radio de desenfoque en móvil (blur(8px) en lugar de blur(20px) en pantallas más pequeñas), evitar efectos de cristal sobre fondos animados o de vídeo en móvil y usar will-change: backdrop-filter como pista al navegador para preparar recursos GPU. También puedes usar la propiedad contain: paint en el elemento de cristal para limitar el alcance de la composición. Prueba en dispositivos reales de gama baja, no solo en tu máquina de desarrollo. Un efecto de cristal que rinde bien en un MacBook Pro podría tener tropiezos en un teléfono Android económico con una GPU Adreno 505. El soporte de navegador para backdrop-filter está ahora muy extendido. Chrome, Edge, Safari y Firefox lo soportan todos. El prefijo -webkit- (-webkit-backdrop-filter) sigue siendo necesario para versiones de Safari anteriores a 18. Internet Explorer no lo soporta. Para navegadores sin soporte, el fallback es un fondo semitransparente sólido sin desenfoque. Define esto como el valor por defecto y superpone el desenfoque encima: background: rgba(255, 255, 255, 0.7) como fallback (más opaco para mantener la legibilidad sin desenfoque), luego @supports (backdrop-filter: blur(1px)) { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); } para navegadores capaces. El fallback mantiene la usabilidad a expensas del efecto de cristal. Un fragmento CSS completo de glassmorphism se ve así. Para los estilos base: background: rgba(255, 255, 255, 0.7) como el fallback para navegadores sin soporte de backdrop-filter. Luego dentro de un bloque @supports: background: rgba(255, 255, 255, 0.15), seguido de backdrop-filter: blur(12px) y -webkit-backdrop-filter: blur(12px). Fuera del bloque @supports, añade border: 1px solid rgba(255, 255, 255, 0.2), box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) y border-radius: 16px. Este patrón cubre todos los navegadores con degradación elegante. La temperatura de color del efecto de cristal establece el ambiente. El cristal cálido usa fondos ligeramente teñidos: rgba(255, 200, 150, 0.15) añade un tinte ámbar cálido. El cristal frío usa tintes azules: rgba(100, 150, 255, 0.15). El cristal neutro usa blanco o negro a distintas opacidades. El tinte interactúa con los colores que haya detrás del cristal, así que el color percibido cambia a medida que cambia el fondo. Esta cualidad dinámica es parte de lo que hace que el glassmorphism se sienta vivo y responsivo al contexto. Para cristal del color de la marca, usa tu color de marca con un alfa muy bajo (0,05 a 0,15) para mantener el efecto translúcido mientras refuerzas la identidad de marca. El glassmorphism en modo oscuro invierte el enfoque. En lugar de cristal claro sobre un fondo colorido, usa cristal oscuro (rgba(0, 0, 0, 0.40) o rgba(17, 25, 40, 0.60)) con un borde más claro (rgba(255, 255, 255, 0.08)). El desenfoque de fondo funciona igual. Los paneles de cristal oscuro se ven sofisticados sobre fondos oscuros con degradados de color sutiles o efectos de luz ambiental. El Centro de Control de Apple en iOS es un ejemplo canónico de glassmorphism oscuro. Para el modo oscuro, el cambio de color del borde es importante: cambia de bordes blancos a versiones ligeramente más claras del fondo oscuro para mantener el borde del cristal sin que el borde parezca demasiado brillante. La legibilidad del texto en paneles de cristal exige atención cuidadosa porque aquí es donde el glassmorphism falla con más frecuencia. El fondo semitransparente y desenfocado significa que el color de fondo efectivo cambia dependiendo de lo que haya detrás del panel. El texto blanco podría ser legible cuando el panel está sobre una zona oscura del fondo pero ilegible cuando se mueve sobre una zona clara (durante el scroll, por ejemplo). Las soluciones incluyen usar un alfa de fondo más alto para asegurar un contraste mínimo independientemente de lo que haya detrás, añadir una sombra de texto para separación extra (text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)), usar pesos de fuente más bold (600 o 700 en lugar de 400) y asegurar que el fondo detrás de los paneles de cristal esté controlado y no sea demasiado variado en brillo. El cristal en capas crea profundidad apilando múltiples paneles de cristal con distintos niveles de desenfoque y opacidades. Una capa de cristal de fondo con desenfoque pesado y baja opacidad se sitúa detrás de un panel de cristal de primer plano con desenfoque más ligero y opacidad ligeramente mayor. Esto crea una sensación de profundidad y jerarquía. Apple usa esto extensivamente en macOS e iOS. Implémentalo con capas z-index: la capa de fondo tiene un radio de desenfoque mayor (blur(20px)) y la capa de primer plano tiene un radio de desenfoque menor (blur(8px)) con ligeramente más opacidad. Tres o más capas es posible pero raro, y cada capa se suma al coste de renderizado. El glassmorphism funciona mejor para patrones específicos de interfaz: barras de navegación flotando sobre el contenido, diálogos modales y superposiciones, paneles de notificación, barras laterales, elementos de tarjeta sobre secciones principales, controles de reproductor multimedia sobre la carátula de un álbum, elementos de tooltip y popover, y widgets de dashboard sobre visualizaciones de datos. Funciona mal para áreas de contenido denso (texto de artículo, tablas de datos, formularios con muchos campos) donde el fondo cambiante detrás del cristal distrae del contenido. Usa efectos de cristal como acentos, no como el tratamiento de superficie por defecto para todo en la página. El fondo detrás del panel de cristal importa tanto como el propio cristal. El glassmorphism se ve mejor sobre fondos coloridos y de degradado con transiciones suaves. Un degradado de morado profundo a azul océano, o de naranja cálido a rosa, proporciona el telón de fondo ideal para el efecto de desenfoque. El panel de cristal suaviza y difumina estos colores de forma hermosa. Sobre un fondo blanco liso o negro liso, el efecto de cristal es invisible porque no hay nada que desenfocar. Sobre un fondo fotográfico ocupado con detalles nítidos, el desenfoque produce un resultado embarrado. Diseña tu fondo y tus paneles de cristal juntos como un sistema. Combinar glassmorphism con otros elementos de diseño mejora el efecto. Los degradados sutiles en el fondo del panel de cristal (un linear-gradient de rgba(255,255,255,0.2) a rgba(255,255,255,0.05)) añaden luz direccional. Las sombras interiores (box-shadow: inset 0 1px 0 rgba(255,255,255,0.2)) simulan la luz golpeando el borde superior del cristal. Border-radius suaviza el panel (16px a 24px es común en diseños de glassmorphism). Juntos, estos detalles hacen que el cristal se sienta más físico y tridimensional. La animación con elementos de cristal debería ser suave y con propósito. Desvanece los paneles de cristal con transiciones de opacidad. Deslízalos a posición con translaciones de transform. Evita animar el valor de desenfoque de backdrop-filter en sí mismo, ya que cambiar el radio de desenfoque en cada fotograma fuerza al navegador a regenerar el fondo desenfocado, lo cual es extremadamente costoso. Si necesitas una animación de desenfoque, considera animar una capa de fondo desenfocada separada usando CSS filter: blur() en un pseudoelemento, lo cual es más fácil de optimizar para los navegadores que backdrop-filter. Las animaciones de transform y opacidad en elementos de cristal rinden bien porque no exigen recalcular el desenfoque. La integración de glassmorphism en el sistema de diseño exige definir un conjunto de tokens de cristal: colores de fondo de cristal en opacidades claras y oscuras, colores de borde de cristal, valores de sombra de cristal y radios de desenfoque de cristal para distintos contextos. Crea clases CSS reutilizables o variantes de componente: .glass-light, .glass-dark, .glass-subtle, .glass-prominent. Documenta qué variantes de cristal funcionan en qué tipos de fondo. Esto previene la inconsistencia de valores de cristal ad hoc por todo el código y asegura que el efecto se degrada de forma consistente en navegadores no soportados. El glassmorphism en React, Vue y otros frameworks de componentes se implementa típicamente como un componente reutilizable o una clase utilidad CSS. En React, un componente GlassPanel acepta props para intensidad de desenfoque, opacidad, color de tinte y visibilidad del borde, renderizando un div con los estilos calculados. Tailwind CSS hace que el glassmorphism sea sencillo con clases utilidad: bg-white/15 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg. La implementación a nivel de componente asegura efectos de cristal consistentes en toda la aplicación y proporciona un único lugar para actualizar el efecto cuando los requisitos de diseño cambian. Las preocupaciones de accesibilidad con glassmorphism se centran en la legibilidad del texto y la sensibilidad al movimiento. Como se ha discutido, el fondo cambiante detrás de los paneles de cristal puede hacer que el texto sea difícil de leer. Adicionalmente, el propio efecto de desenfoque es un efecto visual que algunos usuarios con trastornos vestibulares pueden encontrar desconcertante, particularmente cuando los paneles de cristal se desplazan sobre fondos cambiantes. Respeta las media queries prefers-reduced-transparency y prefers-reduced-motion. Para usuarios que prefieren transparencia reducida, vuelve a un fondo opaco sólido. Para usuarios que prefieren movimiento reducido, evita animar paneles de cristal. El glassmorphism comparado con otras tendencias de diseño ocupa un nicho específico. El neumorfismo (soft UI) usa sombras sutiles para crear efectos elevados y presionados sobre fondos del mismo color. Sufre de contraste pobre y problemas de accesibilidad. El flat design usa colores sólidos sin efectos de profundidad. Material Design usa elevación y sombras sobre superficies opacas. El glassmorphism se sitúa entre el flat design y el material design, añadiendo profundidad a través de la transparencia en lugar de solo sombra. Funciona mejor como estilo de acento. Una aplicación entera en glassmorphism se vuelve visualmente ruidosa. El uso selectivo (navegación, modales, tarjetas destacadas) crea interés visual sin abrumar al usuario. Los ejemplos del mundo real de implementaciones de glassmorphism proporcionan puntos de referencia. Apple usa glassmorphism extensivamente en macOS (barra de menús, barras laterales, centro de notificaciones) e iOS (Centro de Control, widgets, selector de apps). Microsoft usa el material Acrylic en Windows 11 (menú Inicio, barra de tareas, paneles de configuración), que es una variación de glassmorphism con una superposición de textura de ruido. Estas implementaciones demuestran que el glassmorphism funciona mejor cuando el sistema operativo o la aplicación controla el contenido de fondo, asegurando un nivel consistente de desenfoque y contraste. En la web, donde controlas tanto el fondo como los paneles de cristal, tienes el mismo nivel de control. La superposición de textura de ruido añade un grano sutil a los paneles de cristal que los hace parecer más cristal esmerilado físico real. El cristal esmerilado real tiene una textura ligeramente áspera, no un desenfoque perfectamente suave. Puedes añadir esta textura con un pseudoelemento usando un PNG de ruido o un filtro SVG a opacidad muy baja (2 a 5 por ciento). El ruido evita que el cristal parezca demasiado limpio digitalmente. El material Acrylic de Microsoft usa esta técnica. Implementación: añade un pseudoelemento ::before con una pequeña imagen de ruido en mosaico como fondo, posición absoluta para rellenar el panel y opacidad de 0,03 a 0,05. El glassmorphism en scroll exige una implementación cuidadosa. Una barra de navegación de cristal fija sobre contenido en scroll crea un efecto de desenfoque constantemente cambiante a medida que diferente contenido pasa detrás de ella. Esto se ve genial pero exige mucho rendimiento porque el backdrop-filter debe recalcularse en cada fotograma durante el scroll. Para páginas largas con desenfoque pesado basado en scroll, considera usar un efecto más simple en móvil (fondo semitransparente sólido) y reservar el efecto de cristal completo para escritorio donde la potencia GPU suele ser suficiente. Probar el glassmorphism en distintos tipos de contenido detrás del cristal revela cuán robusta es tu implementación. Prueba con contenido de texto, imágenes, vídeos, colores sólidos, degradados y contenido mixto pasando detrás del panel de cristal. Cada tipo de contenido produce distintos resultados de desenfoque. El texto denso detrás del cristal crea un desenfoque gris. Las imágenes coloridas crean colores vibrantes y cambiantes. El vídeo crea un desenfoque constantemente cambiante. Tu panel de cristal necesita mantener la legibilidad del texto y el atractivo visual en todos estos escenarios, o necesitas restringir qué contenido puede aparecer detrás de elementos de cristal. El glassmorphism combinado con patrones de barra lateral esmerilada crea un diseño de aplicación distintivo. Una barra lateral de cristal sobre el área de contenido principal proporciona navegación sin oscurecer completamente el contenido. Al pasar el cursor o expandir la barra lateral se revela más del efecto de cristal. Este patrón funciona bien para dashboards y paneles de administración donde la barra lateral es un elemento secundario. Impléntalo con un elemento de barra lateral fijo o pegajoso que lleve los estilos de cristal, posicionado sobre el área de contenido principal con un z-index apropiado. Existen alternativas CSS puras a backdrop-filter para navegadores antiguos o situaciones con restricciones de rendimiento. Un pseudoelemento (::before) posicionado detrás del contenido puede llevar una copia desenfocada del fondo usando background-attachment: fixed con la misma imagen de fondo que la página, más un CSS filter: blur(). Este enfoque no desenfoca el contenido real detrás del elemento (desenfoca una imagen de fondo fija en su lugar), así que funciona solo para fondos fijos, no para contenido dinámico. A pesar de esta limitación, produce un efecto de cristal convincente con mejor soporte de navegador y rendimiento que backdrop-filter porque el desenfoque se aplica una vez a una imagen estática en lugar de recalcularse en cada fotograma. La herramienta generadora de glassmorphism te permite ajustar el color de fondo, la opacidad, el radio de desenfoque, el borde y la sombra en tiempo real mientras previsualizas el resultado sobre un fondo de muestra. Copia el CSS generado directamente en tu hoja de estilos. Empieza con los valores generados como base, luego refínelos en contexto con tu fondo y contenido reales. El generador maneja la sintaxis incluido el prefijo -webkit- para compatibilidad con Safari y el fallback @supports para navegadores sin soporte de backdrop-filter.
Preguntas frecuentes
¿Qué es el glassmorphism?
El glassmorphism es una tendencia de diseño de UI que presenta elementos translúcidos tipo cristal esmerilado, con desenfoque del fondo y bordes sutiles.
¿Funciona el glassmorphism en todos los navegadores?
La propiedad backdrop-filter es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge.
