Generador de Glassmorphism

Crea efectos de vidrio esmerilado con blur, opacidad y bordes personalizables. Vista previa en vivo sobre un fondo vibrante.

Cómo funciona: Ajusta el desenfoque, opacidad y configuración de bordes para crear tu efecto de vidrio. La vista previa muestra el resultado sobre un fondo colorido. Copia el CSS cuando esté listo.

Glass Card
This is a glassmorphism effect with customizable blur, opacity, and border properties.
Fondo
#ffffff
15%
12px
180%
Borde
1px
20%
16px
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.20);

¿Qué es Glassmorphism?

Glassmorphism es una tendencia de diseño UI que crea un efecto de vidrio esmerilado usando la propiedad CSS backdrop-filter. Los elementos aparecen translúcidos con el fondo difuminado visible a través de ellos, creando profundidad y jerarquía visual. Popularizado por los diseños de macOS e iOS de Apple, combina transparencia, desenfoque y bordes sutiles.

Cómo Crear Efectos de Glassmorphism

Las propiedades principales son backdrop-filter: blur() para el efecto esmerilado, un background-color semitransparente para el tinte, y un borde sutil para la definición de bordes. Ajusta el radio de desenfoque para más o menos transparencia, y usa la saturación del fondo para realzar los colores visibles a través del vidrio.

Compatibilidad de Navegadores para Glassmorphism

La propiedad backdrop-filter es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. Para navegadores antiguos, proporciona un color de fondo sólido como respaldo. Usa @supports (backdrop-filter: blur(1px)) para aplicar el efecto de vidrio condicionalmente.

Consejos de Diseño para Glassmorphism

  • Úsalo sobre fondos vibrantes o degradados para el mejor impacto visual
  • Mantén el blur entre 8-20px para texto legible detrás del vidrio
  • Agrega un borde sutil blanco o claro para definición
  • Asegura que el contraste del texto cumpla las pautas de accesibilidad WCAG
  • Superpón múltiples paneles de vidrio con diferentes opacidades para crear profundidad
  • Combina con un box-shadow sutil para mayor elevación