Generador Glassmorphism

Ajusta blur, opacidad y bordes. Copia CSS listo para producción.

Vector Input

Componente UI glassmorphism. Ajusta los controles para personalizarlo.

SALIDA · CSS
.glass {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

SEO técnico

Documentación ampliada

Generador Glassmorphism: crea tarjetas de cristal sin improvisar CSS

El efecto glassmorphism puede verse elegante, pero requiere equilibrar blur, opacidad, borde y sombra. Esta herramienta te deja ajustar todo eso de forma visual y copiar un bloque CSS listo para producción.

Qué ajustas

  • backdrop-filter
  • Opacidad del fondo
  • Saturación
  • Radio del borde
  • Sombra y contraste

Cuándo usarlo

Va muy bien en modales, overlays, tarjetas de hero y barras flotantes. También te permite comprobar cómo se comporta el efecto en modo claro y modo oscuro.

Ventaja principal

Convierte un efecto visual delicado en un proceso repetible y rápido, sin perder control sobre legibilidad ni rendimiento.