24 CSS Login Form Designs with Live Demos
Glass Frosted
Frosted-glass login form on a soft photographic background. Translucent inputs with subtle inner highlights — a calm, premium hero treatment.
Glass Frosted the 13th of 24 designs in the 24 CSS Login Form Designs with Live Demos collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<form class="lf-glass" aria-label="Sign in form">
<div class="lf-glass-bg" aria-hidden="true"></div>
<article class="lf-glass-card">
<header>
<h2 class="lf-glass-title">Sign in</h2>
<p class="lf-glass-sub">Welcome back. Continue where you left off.</p>
</header>
<label class="lf-glass-field">
<span>Email</span>
<input
type="email"
name="email"
autocomplete="email"
placeholder="[email protected]"
required
/>
</label>
<label class="lf-glass-field">
<span>Password</span>
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="••••••••"
required
/>
</label>
<button type="submit" class="lf-glass-btn">Continue</button>
</article>
</form> .lf-glass {
position: relative;
isolation: isolate;
width: 100%;
max-width: 320px;
border-radius: 18px;
overflow: hidden;
}
.lf-glass-bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(40% 50% at 20% 30%, #f59e0b 0%, transparent 60%),
radial-gradient(50% 60% at 80% 70%, #7c3aed 0%, transparent 60%),
radial-gradient(60% 70% at 50% 50%, #ef4444 0%, transparent 60%), #0a0a14;
filter: blur(30px) saturate(120%);
transform: scale(1.2);
}
.lf-glass-card {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border-radius: 18px;
padding: 26px 22px;
display: grid;
gap: 14px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 18px 48px -16px rgba(0, 0, 0, 0.5);
}
.lf-glass-card header {
display: grid;
gap: 4px;
}
.lf-glass-title {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #fff;
}
.lf-glass-sub {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
}
.lf-glass-field {
display: grid;
gap: 5px;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
}
.lf-glass-field input {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
padding: 10px 12px;
font-size: 13px;
color: #fff;
outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
transition:
border-color 0.2s,
background 0.2s;
}
.lf-glass-field input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.lf-glass-field input:focus {
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.14);
}
.lf-glass-btn {
margin-top: 4px;
padding: 11px;
background: rgba(255, 255, 255, 0.92);
color: #15151d;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition:
transform 0.12s,
background 0.15s;
}
.lf-glass-btn:hover {
transform: translateY(-1px);
background: #fff;
} More from 24 CSS Login Form Designs with Live Demos
Brutalist StampStrength MeterPin PadInline ValidationConstellationBiometric PromptShow Password ToggleOTP VerifyAurora GlowNeon SynthwaveLiquid SlideCard Flip Reset
View the full collection →