24 CSS Login Form Designs with Live Demos 05 / 24
Magic Link
Magic-link / passwordless login form.
The code
<form class="lf-magic">
<div class="lf-magic-icon">
<span class="lf-magic-wand"></span>
<span class="lf-magic-spark s1"></span>
<span class="lf-magic-spark s2"></span>
<span class="lf-magic-spark s3"></span>
</div>
<div class="lf-magic-title">Sign in with magic link</div>
<div class="lf-magic-sub">We'll email you a one-time link. No password needed.</div>
<input type="email" placeholder="[email protected]" required class="lf-magic-input" />
<button type="submit" class="lf-magic-btn">Send magic link</button>
</form> <form class="lf-magic">
<div class="lf-magic-icon">
<span class="lf-magic-wand"></span>
<span class="lf-magic-spark s1"></span>
<span class="lf-magic-spark s2"></span>
<span class="lf-magic-spark s3"></span>
</div>
<div class="lf-magic-title">Sign in with magic link</div>
<div class="lf-magic-sub">We'll email you a one-time link. No password needed.</div>
<input type="email" placeholder="[email protected]" required class="lf-magic-input" />
<button type="submit" class="lf-magic-btn">Send magic link</button>
</form>.lf-magic {
width: 100%;
max-width: 300px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
padding: 28px 22px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
}
.lf-magic-icon {
position: relative;
width: 48px;
height: 48px;
margin-bottom: 4px;
}
.lf-magic-wand {
position: absolute;
inset: 12px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
border-radius: 50%;
box-shadow: 0 0 24px rgba(124, 108, 255, 0.55);
animation: lfmFloat 3s ease-in-out infinite;
}
@keyframes lfmFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
.lf-magic-spark {
position: absolute;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 6px #fff;
animation: lfmSpark 2s ease-in-out infinite;
}
.s1 {
top: 4px;
left: 6px;
animation-delay: 0s;
}
.s2 {
top: 8px;
right: 4px;
animation-delay: 0.5s;
}
.s3 {
bottom: 6px;
left: 12px;
animation-delay: 1s;
}
@keyframes lfmSpark {
0%,
100% {
opacity: 0;
transform: scale(0.4);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
.lf-magic-title {
font-size: 15px;
font-weight: 700;
color: #f0eeff;
}
.lf-magic-sub {
font-size: 11px;
color: #b8b6d4;
line-height: 1.5;
}
.lf-magic-input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 11px 14px;
color: #f0eeff;
font-size: 13px;
outline: none;
transition:
border-color 0.2s,
background 0.2s;
text-align: center;
}
.lf-magic-input:focus {
border-color: #7c6cff;
background: rgba(124, 108, 255, 0.08);
}
.lf-magic-btn {
width: 100%;
padding: 11px 14px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 24px -8px rgba(124, 108, 255, 0.7);
}
@media (prefers-reduced-motion: reduce) {
.lf-magic,
.lf-magic * {
animation: none !important;
}
}
.lf-magic {
width: 100%;
max-width: 300px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
padding: 28px 22px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
}
.lf-magic-icon {
position: relative;
width: 48px;
height: 48px;
margin-bottom: 4px;
}
.lf-magic-wand {
position: absolute;
inset: 12px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
border-radius: 50%;
box-shadow: 0 0 24px rgba(124, 108, 255, 0.55);
animation: lfmFloat 3s ease-in-out infinite;
}
@keyframes lfmFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
.lf-magic-spark {
position: absolute;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 6px #fff;
animation: lfmSpark 2s ease-in-out infinite;
}
.s1 {
top: 4px;
left: 6px;
animation-delay: 0s;
}
.s2 {
top: 8px;
right: 4px;
animation-delay: 0.5s;
}
.s3 {
bottom: 6px;
left: 12px;
animation-delay: 1s;
}
@keyframes lfmSpark {
0%,
100% {
opacity: 0;
transform: scale(0.4);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
.lf-magic-title {
font-size: 15px;
font-weight: 700;
color: #f0eeff;
}
.lf-magic-sub {
font-size: 11px;
color: #b8b6d4;
line-height: 1.5;
}
.lf-magic-input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 11px 14px;
color: #f0eeff;
font-size: 13px;
outline: none;
transition:
border-color 0.2s,
background 0.2s;
text-align: center;
}
.lf-magic-input:focus {
border-color: #7c6cff;
background: rgba(124, 108, 255, 0.08);
}
.lf-magic-btn {
width: 100%;
padding: 11px 14px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 24px -8px rgba(124, 108, 255, 0.7);
}
@media (prefers-reduced-motion: reduce) {
.lf-magic,
.lf-magic * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
Floating PillGradient BorderSide PanelSocial FirstAnimated MascotCompact ModalGlass FrostedStep-by-StepAnimated Gradient BorderVault LockBrutalist StampStrength Meter
View the full collection →