Glassmorphism Login Form HTML CSS JS — Frosted Glass

Glassmorphism is the UI trend that gives elements the appearance of frosted glass — a translucent surface with blurred content visible behind it. It became the defining aesthetic of macOS Big Sur and has since spread across web dashboards, authentication screens, and marketing pages. Achieving the effect correctly requires three specific CSS properties working in concert, plus a carefully designed background scene to blur.

This snippet builds a complete glassmorphism login form with animated background blobs, real-time form validation, a password strength-aware eye toggle, social login buttons, and a 3D card flip animation that reveals a success state on submit.

The Glassmorphism Effect

Three CSS properties produce the frosted glass appearance:

`backdrop-filter: blur(16px)` blurs all content rendered behind the element. This is the core glassmorphism technique. The blur radius (16px here) controls how frosted the glass looks — higher values are more opaque-feeling, lower values more transparent.

`background: rgba(255, 255, 255, 0.12)` applies a semi-transparent white tint over the blurred background. Without this, the element would be invisible. The alpha value (0.12) controls transparency — lower = more see-through, higher = more opaque.

`border: 1px solid rgba(255, 255, 255, 0.25)` adds a bright edge that simulates the light catching the glass edge. This border is what makes glassmorphism look three-dimensional rather than flat.

Critically, these three properties only produce the intended effect when there is rich, colorful content behind the element to blur. That is why glassmorphism UIs always pair the glass card with a vibrant gradient background or animated elements.

Animated Background Blobs

The animated color blobs behind the login card are <div class="blob"> elements positioned with position: absolute in a full-screen scene container. Each blob uses a CSS @keyframes animation that morphs its border-radius between different asymmetric values and translates it along a looping path.

The blob shapes use border-radius values like 60% 40% 30% 70% / 60% 30% 70% 40% — the slash syntax sets per-corner radii independently for horizontal and vertical radii, producing organic blob shapes rather than circles or pills. The animation uses 8-second and 12-second durations with alternate direction to create non-repeating blob movements that never feel mechanical.

Form Validation

Validation fires on blur (when the user leaves a field) and on submit. For the email field: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) — a minimal but effective email regex that checks for at-sign and dot without complex backtracking. For the password field: value.length >= 8 — a minimum length check only, appropriate for a login form (password strength is for registration, not login).

Errors display as red text in a <span class="field-error"> element beneath each field. On error: the field wrapper gets a has-error class (red border and background tint), the error span becomes visible, and the field shakes via a CSS keyframe animation (translateX oscillating ±4px, 300ms). On correction: the has-error class is removed and the error span clears.

Password Eye Toggle

The eye button toggles passInput.type between password and text. The icon swaps between two SVG paths: the open eye (circle with surrounding arc) and the eye-off (same paths with a diagonal slash line). SVG path data is stored in two constants (SVG_EYE, SVG_EYE_OFF) and swapped via eyeIcon.innerHTML. This avoids external icon fonts and keeps the toggle entirely self-contained.

3D Card Flip on Success

On successful form submission, the login card performs a 3D flip animation to reveal a success state. This uses transform-style: preserve-3d on the card container, with the login panel at rotateY(0deg) (front face) and the success panel at rotateY(180deg) (back face, visible only when flipped). Both panels have backface-visibility: hidden — each becomes invisible when rotated more than 90° away from the viewer.

The flip is triggered by adding a flipped class to the card element: .card.flipped { transform: rotateY(180deg); } with transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1). The transition produces a smooth, physics-feel rotation. The CSS perspective: 1000px on the parent scene element creates the 3D depth that makes the rotation look three-dimensional rather than flat.

Loading State During Submission

The submit button has three states: idle (Sign In), loading (spinner + Signing in…), and success (handled by the flip). The loading state is triggered by calling setLoading(true) — which adds loading class, disables the button, and sets aria-busy="true". A CSS keyframe rotates a spinner SVG. setTimeout simulates the API response delay before triggering the success flip. In production, replace the timeout with your actual authentication API call.

Social Login Buttons

Google, GitHub, and email buttons are cosmetic in the demo — they fire click events that in production would redirect to OAuth provider URLs or trigger window.location.href redirects. Each button has the provider's brand icon as an inline SVG and a text label. The divider between social and email login uses the classic "OR" text with CSS borders: ::before and ::after pseudo-elements with flex: 1; height: 1px; background: rgba(255,255,255,0.2).