Glass sign-in form
A glass sign-in card with translucent fields, a sign-in button and a passkey option.
Settings
Code
<div class="uv-glg"><form class="cd"><p class="ti">Welcome back</p><label><span>Mail</span><input type="email" autocomplete="email" placeholder="you@email.com"></label><label><span>Password</span><input type="password" autocomplete="current-password" placeholder="••••••••"></label><button type="submit" class="go">Sign in</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>Use a passkey</button></form></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
Sign-in screens are often the first impression of an app, and a glass card over a vivid aurora sets a premium tone without heavy imagery. The card holds a greeting, translucent email and password fields that brighten when focused, a solid white sign-in button and a secondary button to use a passkey.
Fields use the right autocomplete hints so browsers and password managers fill them, and the form prevents submission in the demo so you can wire your own logic. Edit the greeting with the text control and tune blur and tint to the background.