24 CSS Login Form Designs with Live Demos 03 / 24
Liquid Slide
Animated sign in form with a brand stripe that slides in on mount and underlined inputs that draw outward from the centre on focus.
The code
<form class="lf-liquid">
<div class="lf-liquid-stripe"></div>
<div class="lf-liquid-body">
<div class="lf-liquid-title">Account Login</div>
<div class="lf-liquid-row">
<input type="email" placeholder="Email" required />
</div>
<div class="lf-liquid-row">
<input type="password" placeholder="Password" required />
</div>
<div class="lf-liquid-meta">
<label><input type="checkbox" /> Remember me</label>
<a href="#">Forgot?</a>
</div>
<button type="submit" class="lf-liquid-btn">Continue</button>
</div>
</form> <form class="lf-liquid">
<div class="lf-liquid-stripe"></div>
<div class="lf-liquid-body">
<div class="lf-liquid-title">Account Login</div>
<div class="lf-liquid-row">
<input type="email" placeholder="Email" required />
</div>
<div class="lf-liquid-row">
<input type="password" placeholder="Password" required />
</div>
<div class="lf-liquid-meta">
<label><input type="checkbox" /> Remember me</label>
<a href="#">Forgot?</a>
</div>
<button type="submit" class="lf-liquid-btn">Continue</button>
</div>
</form>.lf-liquid {
position: relative;
width: 100%;
max-width: 320px;
background: #15151d;
border-radius: 14px;
overflow: hidden;
display: grid;
grid-template-columns: 64px 1fr;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-liquid-stripe {
background: linear-gradient(180deg, #7c6cff, #ff6c8a);
animation: lfqSlide 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
position: relative;
}
.lf-liquid-stripe::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 40%);
mix-blend-mode: screen;
}
@keyframes lfqSlide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.lf-liquid-body {
padding: 22px 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.lf-liquid-title {
font-size: 16px;
font-weight: 700;
color: #f0eeff;
letter-spacing: -0.01em;
}
.lf-liquid-row {
position: relative;
}
.lf-liquid-row input {
width: 100%;
box-sizing: border-box;
padding: 8px 0 9px;
font-size: 13px;
background: transparent;
color: #f0eeff;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
outline: none;
}
.lf-liquid-row::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
right: 50%;
height: 1.5px;
background: linear-gradient(90deg, #7c6cff, #ff6c8a);
transition:
left 0.28s ease,
right 0.28s ease;
}
.lf-liquid-row:focus-within::after {
left: 0;
right: 0;
}
.lf-liquid-row input::placeholder {
color: #b8b6d4;
}
.lf-liquid-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: #b8b6d4;
}
.lf-liquid-meta a {
color: #a78bfa;
text-decoration: none;
}
.lf-liquid-meta input {
accent-color: #7c6cff;
margin-right: 4px;
}
.lf-liquid-btn {
margin-top: 4px;
padding: 10px 14px;
background: #f0eeff;
color: #15151d;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s;
}
.lf-liquid-btn:hover {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.lf-liquid,
.lf-liquid * {
animation: none !important;
}
}
.lf-liquid {
position: relative;
width: 100%;
max-width: 320px;
background: #15151d;
border-radius: 14px;
overflow: hidden;
display: grid;
grid-template-columns: 64px 1fr;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-liquid-stripe {
background: linear-gradient(180deg, #7c6cff, #ff6c8a);
animation: lfqSlide 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
position: relative;
}
.lf-liquid-stripe::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 40%);
mix-blend-mode: screen;
}
@keyframes lfqSlide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.lf-liquid-body {
padding: 22px 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.lf-liquid-title {
font-size: 16px;
font-weight: 700;
color: #f0eeff;
letter-spacing: -0.01em;
}
.lf-liquid-row {
position: relative;
}
.lf-liquid-row input {
width: 100%;
box-sizing: border-box;
padding: 8px 0 9px;
font-size: 13px;
background: transparent;
color: #f0eeff;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
outline: none;
}
.lf-liquid-row::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
right: 50%;
height: 1.5px;
background: linear-gradient(90deg, #7c6cff, #ff6c8a);
transition:
left 0.28s ease,
right 0.28s ease;
}
.lf-liquid-row:focus-within::after {
left: 0;
right: 0;
}
.lf-liquid-row input::placeholder {
color: #b8b6d4;
}
.lf-liquid-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: #b8b6d4;
}
.lf-liquid-meta a {
color: #a78bfa;
text-decoration: none;
}
.lf-liquid-meta input {
accent-color: #7c6cff;
margin-right: 4px;
}
.lf-liquid-btn {
margin-top: 4px;
padding: 10px 14px;
background: #f0eeff;
color: #15151d;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s;
}
.lf-liquid-btn:hover {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.lf-liquid,
.lf-liquid * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
Vault LockBrutalist StampStrength MeterPin PadInline ValidationConstellationBiometric PromptShow Password ToggleOTP VerifyAurora GlowNeon SynthwaveCard Flip Reset
View the full collection →