Inicio de sesión de cristal
Una tarjeta de acceso de cristal con campos translúcidos, botón de entrar y opción de llave de acceso.
Ajustes
Código
<div class="uv-glg"><form class="cd"><p class="ti">Hola de nuevo</p><label><span>Correo</span><input type="email" autocomplete="email" placeholder="tu@correo.com"></label><label><span>Contraseña</span><input type="password" autocomplete="current-password" placeholder="••••••••"></label><button type="submit" class="go">Entrar</button><button type="button" class="pk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="9" r="3.5"/><path d="M3 20c0-3 2.2-5.5 5-5.5s5 2.5 5 5.5M15 10.5a2.5 2.5 0 1 1 3.5 2.3V18l-1 1-1-1 .6-1-.6-1 .6-1-.6-.8v-1.4A2.5 2.5 0 0 1 15 10.5z"/></svg>Usar llave de acceso</button></form></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Las pantallas de acceso suelen ser la primera impresión de una app, y una tarjeta de cristal sobre una aurora intensa da un tono premium sin imágenes pesadas. La tarjeta tiene un saludo, campos de correo y contraseña translúcidos que se iluminan al enfocarlos, un botón blanco sólido para entrar y un botón secundario para usar una llave de acceso.
Los campos llevan los autocomplete correctos para que navegadores y gestores de contraseñas los rellenen, y en la demo el formulario no se envía para que conectes tu lógica. Cambia el saludo con el control de texto y ajusta desenfoque y tinte al fondo.