Generador de glassmorphism

Crea paneles de "vidrio esmerilado": translúcidos, con el fondo desenfocado detrás y un borde brillante. Copia el CSS y el HTML.

¿Cómo funciona el efecto vidrio?

El glassmorphism combina tres ingredientes:

1. Fondo semitransparente: background: rgba(255, 255, 255, 0.2) deja ver lo que hay detrás.
2. backdrop-filter: aplica filtros (desenfoque, saturación...) a lo que está detrás del elemento, no al elemento en sí. blur() crea el efecto esmerilado.
3. Borde claro y sombra suave: simulan el canto del vidrio y lo separan del fondo.

.vidrio {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(16px) saturate(180%); /* Safari */
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
}

Generador

Ajusta el desenfoque, la opacidad y el color del panel. Cambia el fondo de ejemplo para ver cómo se comporta sobre escenas claras y oscuras.

Generador de glassmorphism

Vidrio

DesenfoquepxOpacidad del colorColor del panelSaturación del fondo%Radiopx

Borde y sombra

Borde brillanteOpacidad del borde SombraOpacidad de la sombra

Fondo de ejemplo

GlassmorphismUn panel translúcido que deja ver el fondo desenfocado.

/* El efecto sólo se nota si DETRÁS hay algo colorido */
.fondo {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f97316, #db2777 50%, #7c3aed);
}

.vidrio {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(16px) saturate(180%); /* Safari */
  backdrop-filter: blur(16px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  color: #ffffff;
}

/* Respaldo para navegadores sin backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .vidrio { background: rgba(255, 255, 255, 0.7); }
}

Consejos de uso

• El efecto necesita algo colorido detrás: un degradado, formas, una foto. Sobre un fondo liso el vidrio sólo se ve como un rectángulo pálido.
• Subir la saturación (saturate(150%–200%)) hace que los colores del fondo se vean más vivos a través del vidrio: es lo que hace Apple en macOS e iOS.
• Legibilidad: si el fondo es muy variado, sube la opacidad del panel o el desenfoque para que el texto tenga contraste suficiente.
• Úsalo en pocos elementos (una barra de navegación fija, un modal, una tarjeta destacada). backdrop-filter consume recursos y abusar de él vuelve lento el scroll en móviles.
• En una navbar fija, el vidrio deja ver el contenido al hacer scroll por debajo: un detalle muy elegante.

Buena práctica

Escribe siempre la versión con prefijo -webkit-backdrop-filter para Safari y un respaldo con @supports not (backdrop-filter: blur(1px)) que suba la opacidad del fondo. El código generado ya incluye ambos.

Error común

Usar filter: blur() en lugar de backdrop-filter. filter desenfoca el propio panel y su texto; backdrop-filter desenfoca lo que hay detrás. Y si el panel tiene background totalmente opaco, el efecto no se verá.