Generador de glassmorphism
Crea tarjetas de interfaz con efecto cristal esmerilado, desenfoque de fondo, transparencia y bordes, y copia el CSS.
Tarjeta de cristal
Cristal esmerilado flotando sobre un fondo vívido.
—
Genera tanto backdrop-filter como -webkit-backdrop-filter. Nota: backdrop-filter no es compatible con navegadores antiguos (p. ej. Firefox anterior a 103); añade un fondo sólido de reserva para esos casos.
Acerca de Generador de glassmorphism
El Generador de Glassmorphism construye el efecto de tarjeta de vidrio esmerilado: un panel translúcido que desenfoca todo lo que hay detrás de él. Los deslizadores controlan el desenfoque y la saturación del backdrop-filter, el color y transparencia del tinte del vidrio, el color y opacidad del borde, el radio de esquina y una sombra exterior; cada cambio se renderiza en vivo sobre un fondo vivo para que puedas juzgar el efecto de forma realista.
Cuatro ajustes predefinidos de calidad (sutil, esmerilado, vívido y vidrio oscuro) te dan combinaciones probadas para empezar. El preajuste oscuro muestra cómo la misma receta se adapta a interfaces oscuras, donde un borde de luz tenue hace la mayor parte del trabajo de separar el vidrio del fondo.
El CSS generado incluye tanto backdrop-filter como el prefijo -webkit-backdrop-filter que requiere Safari. Ten en cuenta la advertencia de compatibilidad: los navegadores antiguos (por ejemplo, Firefox antes de la versión 103) no admiten backdrop-filter, así que ofrece un fondo sólido de respaldo para ellos.
Cómo usar Generador de glassmorphism
- Empieza desde un ajuste predefinido (sutil, esmerilado, vívido o vidrio oscuro) o desde los valores predeterminados.
- Ajusta el desenfoque y la saturación del filtro de fondo.
- Establece el color y la transparencia del tinte del vidrio.
- Ajusta el color del borde, la opacidad del borde, el radio de esquina y la sombra de contorno.
- Copia el CSS: ya incluye la propiedad con prefijo -webkit- para Safari.