24 CSS Login Form Designs with Live Demos 12 / 24
Compact Modal
Modal / dialog login form.
The code
<form class="lf-modal">
<button type="button" class="lf-modal-close" aria-label="Close">×</button>
<div class="lf-modal-title">Sign in to Codefronts</div>
<div class="lf-modal-sub">Use your email and password to continue</div>
<label class="lf-modal-row">
<span>Email</span>
<input type="email" placeholder="[email protected]" required />
</label>
<label class="lf-modal-row">
<span>Password <a href="#">Forgot?</a></span>
<input type="password" placeholder="••••••••" required />
</label>
<label class="lf-modal-check"> <input type="checkbox" /> Keep me signed in for 30 days </label>
<button type="submit" class="lf-modal-submit">Sign in</button>
</form> <form class="lf-modal">
<button type="button" class="lf-modal-close" aria-label="Close">×</button>
<div class="lf-modal-title">Sign in to Codefronts</div>
<div class="lf-modal-sub">Use your email and password to continue</div>
<label class="lf-modal-row">
<span>Email</span>
<input type="email" placeholder="[email protected]" required />
</label>
<label class="lf-modal-row">
<span>Password <a href="#">Forgot?</a></span>
<input type="password" placeholder="••••••••" required />
</label>
<label class="lf-modal-check"> <input type="checkbox" /> Keep me signed in for 30 days </label>
<button type="submit" class="lf-modal-submit">Sign in</button>
</form>.lf-modal {
position: relative;
width: 100%;
max-width: 320px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow:
0 24px 48px -16px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lf-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
background: transparent;
border: none;
color: #b8b6d4;
font-size: 18px;
cursor: pointer;
border-radius: 4px;
transition:
background 0.15s,
color 0.15s;
line-height: 1;
}
.lf-modal-close:hover {
background: rgba(255, 255, 255, 0.06);
color: #f0eeff;
}
.lf-modal-title {
font-size: 16px;
font-weight: 700;
color: #f0eeff;
}
.lf-modal-sub {
font-size: 12px;
color: #b8b6d4;
margin-top: -8px;
margin-bottom: 4px;
}
.lf-modal-row {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 11px;
color: #b8b6d4;
}
.lf-modal-row > span {
display: flex;
justify-content: space-between;
align-items: center;
}
.lf-modal-row > span a {
color: #a78bfa;
text-decoration: none;
font-size: 11px;
}
.lf-modal-row input {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px 12px;
color: #f0eeff;
font-size: 13px;
outline: none;
transition:
border-color 0.15s,
box-shadow 0.15s,
background 0.15s;
}
.lf-modal-row input:hover {
background: rgba(255, 255, 255, 0.06);
}
.lf-modal-row input:focus {
border-color: #7c6cff;
box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15);
}
.lf-modal-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #b8b6d4;
}
.lf-modal-check input {
accent-color: #7c6cff;
}
.lf-modal-submit {
padding: 10px;
background: rgba(124, 108, 255, 0.18);
color: #c8c0ff;
border: 1px solid rgba(124, 108, 255, 0.4);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
}
.lf-modal-submit:hover {
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
border-color: transparent;
} .lf-modal {
position: relative;
width: 100%;
max-width: 320px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow:
0 24px 48px -16px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lf-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
background: transparent;
border: none;
color: #b8b6d4;
font-size: 18px;
cursor: pointer;
border-radius: 4px;
transition:
background 0.15s,
color 0.15s;
line-height: 1;
}
.lf-modal-close:hover {
background: rgba(255, 255, 255, 0.06);
color: #f0eeff;
}
.lf-modal-title {
font-size: 16px;
font-weight: 700;
color: #f0eeff;
}
.lf-modal-sub {
font-size: 12px;
color: #b8b6d4;
margin-top: -8px;
margin-bottom: 4px;
}
.lf-modal-row {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 11px;
color: #b8b6d4;
}
.lf-modal-row > span {
display: flex;
justify-content: space-between;
align-items: center;
}
.lf-modal-row > span a {
color: #a78bfa;
text-decoration: none;
font-size: 11px;
}
.lf-modal-row input {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px 12px;
color: #f0eeff;
font-size: 13px;
outline: none;
transition:
border-color 0.15s,
box-shadow 0.15s,
background 0.15s;
}
.lf-modal-row input:hover {
background: rgba(255, 255, 255, 0.06);
}
.lf-modal-row input:focus {
border-color: #7c6cff;
box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15);
}
.lf-modal-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #b8b6d4;
}
.lf-modal-check input {
accent-color: #7c6cff;
}
.lf-modal-submit {
padding: 10px;
background: rgba(124, 108, 255, 0.18);
color: #c8c0ff;
border: 1px solid rgba(124, 108, 255, 0.4);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
}
.lf-modal-submit:hover {
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
border-color: transparent;
}More from 24 CSS Login Form Designs with Live Demos
Side PanelSocial FirstAnimated MascotGlass FrostedStep-by-StepAnimated Gradient BorderVault LockBrutalist StampStrength MeterPin PadInline ValidationConstellation
View the full collection →