Glassmorphism CSS: Cómo crear UI con efecto vidrio
Implementa glassmorphism con backdrop-filter, transparencia rgba y trucos de bordes. Incluye soporte de navegadores y accesibilidad.
El glassmorphism se convirtió en una de las tendencias UI definitorias de principios de los 2020. El efecto de vidrio esmerilado crea una sensación de profundidad y translucidez.
La implementación CSS requiere tres ingredientes: backdrop-filter para el desenfoque, rgba para la transparencia y un borde semitransparente.
Qué es el glassmorphism
El glassmorphism es un estilo de diseño caracterizado por superficies translúcidas con efecto de vidrio esmerilado. Propiedades visuales clave: transparencia de fondo (30-50% de opacidad), desenfoque de fondo (8-32px), borde sutil (1-2px, blanco semitransparente).
Herramienta gratuita Generador de Glassmorphism Crea efectos UI de vidrio esmerilado con vista previa CSS en vivoSintaxis backdrop-filter: blur()
backdrop-filter aplica efectos gráficos al contenido detrás de un elemento. La función blur() desenfoca el fondo: backdrop-filter: blur(12px).
rgba y transparencia
La superficie de vidrio usa rgba() con alpha bajo: background: rgba(255, 255, 255, 0.15). El valor alpha (0.15-0.25) controla la transparencia de la superficie.
Herramienta gratuita Generador de Filtros CSS Aplica desenfoque, brillo y contraste con filtros CSSBorde con rgba
Una característica definitoria del glassmorphism es el borde semitransparente: border: 1px solid rgba(255, 255, 255, 0.3). El borde simula la luz reflejándose en el borde del vidrio.
Soporte de navegadores y fallbacks
backdrop-filter está soportado en todos los navegadores modernos desde 2022. Usa @supports (backdrop-filter: blur(1px)) para aplicar glassmorphism solo donde sea soportado.
Consideraciones de rendimiento
backdrop-filter es costoso en rendimiento. Limita el número de elementos con backdrop-filter y prueba en dispositivos de bajo rendimiento.
Herramienta gratuita Generador de Neumorphism Crea efectos de UI suave extruida con dobles sombras box