Saltar al contenido
Numio

Generador de glassmorphism

Crea paneles de cristal esmerilado con backdrop-filter. Ajusta el desenfoque, la transparencia, la saturación y el borde sobre un fondo en vivo, y copia el CSS.

Vista previa en tiempo real

Cristal esmerilado

El texto sobre cristal necesita suficiente contraste en todas las partes del fondo.

El fondo es solo para la vista previa y no se exporta.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Todo permanece en tu navegador.

Referencias de formatos

Página de la herramienta actualizada: