24 CSS Login Form Designs with Live Demos
Aurora Glow
Glassmorphism login form on a drifting aurora gradient. Floating labels rise on focus and the submit button picks up a soft brand glow on hover.
Aurora Glow the 1st 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-aurora">
<div class="lf-aurora-bg"></div>
<div class="lf-aurora-card">
<div class="lf-aurora-title">Welcome back</div>
<div class="lf-aurora-sub">Sign in to continue</div>
<label class="lf-aurora-field">
<input type="email" placeholder=" " required />
<span>Email address</span>
</label>
<label class="lf-aurora-field">
<input type="password" placeholder=" " required />
<span>Password</span>
</label>
<button type="submit" class="lf-aurora-btn">Sign in →</button>
<div class="lf-aurora-foot">No account? <a href="#">Create one</a></div>
</div>
</form> .lf-aurora {
position: relative;
width: 100%;
max-width: 320px;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
}
.lf-aurora-bg {
position: absolute;
inset: -40%;
z-index: 0;
background:
radial-gradient(40% 40% at 30% 30%, #7c6cff 0%, transparent 60%),
radial-gradient(50% 50% at 70% 70%, #ff6c8a 0%, transparent 60%),
radial-gradient(60% 60% at 50% 50%, #2eb88a 0%, transparent 60%);
filter: blur(40px) saturate(140%);
animation: lfaDrift 14s ease-in-out infinite alternate;
}
@keyframes lfaDrift {
0% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
100% {
transform: translate3d(-8%, -4%, 0) rotate(8deg);
}
}
.lf-aurora-card {
position: relative;
z-index: 1;
background: rgba(15, 15, 19, 0.55);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.lf-aurora-title {
font-size: 18px;
font-weight: 700;
color: #f0eeff;
}
.lf-aurora-sub {
font-size: 12px;
color: #b8b6d4;
margin-top: -10px;
}
.lf-aurora-field {
position: relative;
display: block;
}
.lf-aurora-field input {
width: 100%;
box-sizing: border-box;
padding: 14px 12px 10px;
font-size: 13px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: #f0eeff;
outline: none;
transition:
border-color 0.2s,
background 0.2s;
}
.lf-aurora-field input:focus {
border-color: #7c6cff;
background: rgba(124, 108, 255, 0.08);
}
.lf-aurora-field span {
position: absolute;
left: 12px;
top: 12px;
font-size: 12px;
color: #b8b6d4;
pointer-events: none;
transition:
transform 0.2s,
color 0.2s,
font-size 0.2s;
}
.lf-aurora-field input:focus + span,
.lf-aurora-field input:not(:placeholder-shown) + span {
transform: translateY(-9px);
font-size: 9px;
color: #a78bfa;
letter-spacing: 0.08em;
}
.lf-aurora-btn {
margin-top: 4px;
padding: 11px 14px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
font-size: 13px;
font-weight: 600;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 6px 24px -8px rgba(124, 108, 255, 0.7);
transition:
transform 0.15s,
box-shadow 0.25s;
}
.lf-aurora-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 32px -8px rgba(124, 108, 255, 0.9);
}
.lf-aurora-foot {
font-size: 11px;
color: #b8b6d4;
text-align: center;
}
.lf-aurora-foot a {
color: #a78bfa;
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.lf-aurora,
.lf-aurora * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
Neon SynthwaveLiquid SlideCard Flip ResetMagic LinkTerminal PromptFloating PillGradient BorderSide PanelSocial FirstAnimated MascotCompact ModalGlass Frosted
View the full collection →