24 CSS Login Form Designs with Live Demos 14 / 24
Step-by-Step
Multi-step login form.
The code
<form class="lf-step" aria-label="Two-step sign in">
<input type="radio" id="lf-step-1" name="lf-step" class="lf-step-radio" checked />
<input type="radio" id="lf-step-2" name="lf-step" class="lf-step-radio" />
<header class="lf-step-head">
<span class="lf-step-bar" aria-hidden="true"></span>
<span class="lf-step-counter"><span class="lf-step-now">1</span> of 2</span>
</header>
<div class="lf-step-track">
<fieldset class="lf-step-pane">
<legend class="lf-step-label">What's your email?</legend>
<label class="lf-step-row">
<input
type="email"
name="email"
autocomplete="email"
placeholder="[email protected]"
required
/>
</label>
<label for="lf-step-2" class="lf-step-btn primary">Next →</label>
</fieldset>
<fieldset class="lf-step-pane">
<legend class="lf-step-label">Now your password</legend>
<label class="lf-step-row">
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="••••••••"
required
/>
</label>
<div class="lf-step-actions">
<label for="lf-step-1" class="lf-step-btn ghost">← Back</label>
<button type="submit" class="lf-step-btn primary">Sign in</button>
</div>
</fieldset>
</div>
</form> <form class="lf-step" aria-label="Two-step sign in">
<input type="radio" id="lf-step-1" name="lf-step" class="lf-step-radio" checked />
<input type="radio" id="lf-step-2" name="lf-step" class="lf-step-radio" />
<header class="lf-step-head">
<span class="lf-step-bar" aria-hidden="true"></span>
<span class="lf-step-counter"><span class="lf-step-now">1</span> of 2</span>
</header>
<div class="lf-step-track">
<fieldset class="lf-step-pane">
<legend class="lf-step-label">What's your email?</legend>
<label class="lf-step-row">
<input
type="email"
name="email"
autocomplete="email"
placeholder="[email protected]"
required
/>
</label>
<label for="lf-step-2" class="lf-step-btn primary">Next →</label>
</fieldset>
<fieldset class="lf-step-pane">
<legend class="lf-step-label">Now your password</legend>
<label class="lf-step-row">
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="••••••••"
required
/>
</label>
<div class="lf-step-actions">
<label for="lf-step-1" class="lf-step-btn ghost">← Back</label>
<button type="submit" class="lf-step-btn primary">Sign in</button>
</div>
</fieldset>
</div>
</form>.lf-step {
width: 100%;
max-width: 320px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
padding: 22px 22px;
display: grid;
gap: 14px;
overflow: hidden;
}
.lf-step-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.lf-step-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
font-size: 11px;
color: #b8b6d4;
}
.lf-step-bar {
height: 3px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
.lf-step-bar::after {
content: "";
position: absolute;
inset: 0;
right: 50%;
background: linear-gradient(90deg, #7c6cff, #ff6c8a);
border-radius: inherit;
transition: right 0.4s ease;
}
.lf-step:has(#lf-step-2:checked) .lf-step-bar::after {
right: 0;
}
.lf-step:has(#lf-step-2:checked) .lf-step-now::after {
content: "2";
}
.lf-step-now {
font-weight: 700;
color: #f0eeff;
}
.lf-step-now::after {
content: "1";
}
.lf-step-now {
font-size: 0;
}
.lf-step-now::after {
font-size: 11px;
}
.lf-step-track {
display: grid;
grid-template-columns: 100% 100%;
width: 100%;
transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.lf-step:has(#lf-step-2:checked) .lf-step-track {
transform: translateX(-100%);
}
.lf-step-pane {
border: 0;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
min-width: 0;
}
.lf-step-label {
font-size: 13px;
font-weight: 600;
color: #f0eeff;
padding: 0;
}
.lf-step-row input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
color: #f0eeff;
outline: none;
transition: border-color 0.15s;
}
.lf-step-row input:focus {
border-color: #7c6cff;
}
.lf-step-actions {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
}
.lf-step-btn {
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
border: 1px solid transparent;
transition:
transform 0.12s,
background 0.15s;
}
.lf-step-btn.primary {
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
}
.lf-step-btn.primary:hover {
transform: translateY(-1px);
}
.lf-step-btn.ghost {
background: transparent;
color: #b8b6d4;
border-color: rgba(255, 255, 255, 0.1);
}
.lf-step-btn.ghost:hover {
color: #f0eeff;
background: rgba(255, 255, 255, 0.04);
} .lf-step {
width: 100%;
max-width: 320px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
padding: 22px 22px;
display: grid;
gap: 14px;
overflow: hidden;
}
.lf-step-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.lf-step-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
font-size: 11px;
color: #b8b6d4;
}
.lf-step-bar {
height: 3px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
.lf-step-bar::after {
content: "";
position: absolute;
inset: 0;
right: 50%;
background: linear-gradient(90deg, #7c6cff, #ff6c8a);
border-radius: inherit;
transition: right 0.4s ease;
}
.lf-step:has(#lf-step-2:checked) .lf-step-bar::after {
right: 0;
}
.lf-step:has(#lf-step-2:checked) .lf-step-now::after {
content: "2";
}
.lf-step-now {
font-weight: 700;
color: #f0eeff;
}
.lf-step-now::after {
content: "1";
}
.lf-step-now {
font-size: 0;
}
.lf-step-now::after {
font-size: 11px;
}
.lf-step-track {
display: grid;
grid-template-columns: 100% 100%;
width: 100%;
transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.lf-step:has(#lf-step-2:checked) .lf-step-track {
transform: translateX(-100%);
}
.lf-step-pane {
border: 0;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
min-width: 0;
}
.lf-step-label {
font-size: 13px;
font-weight: 600;
color: #f0eeff;
padding: 0;
}
.lf-step-row input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
color: #f0eeff;
outline: none;
transition: border-color 0.15s;
}
.lf-step-row input:focus {
border-color: #7c6cff;
}
.lf-step-actions {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
}
.lf-step-btn {
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
border: 1px solid transparent;
transition:
transform 0.12s,
background 0.15s;
}
.lf-step-btn.primary {
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
}
.lf-step-btn.primary:hover {
transform: translateY(-1px);
}
.lf-step-btn.ghost {
background: transparent;
color: #b8b6d4;
border-color: rgba(255, 255, 255, 0.1);
}
.lf-step-btn.ghost:hover {
color: #f0eeff;
background: rgba(255, 255, 255, 0.04);
}More from 24 CSS Login Form Designs with Live Demos
OTP VerifyAurora GlowNeon SynthwaveLiquid SlideCard Flip ResetMagic LinkTerminal PromptFloating PillGradient BorderSide PanelSocial FirstAnimated Mascot
View the full collection →