24 CSS Login Form Designs with Live Demos

Magic Link

Magic-link / passwordless login form. A single email field with an animated wand-sparkle icon — the modern pattern for email-only authentication.

Pure CSS MIT licensed

Magic Link the 5th 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

Open in playground

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>

.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 Pill Gradient Border Side Panel Social First Animated Mascot Compact Modal Glass Frosted Step-by-Step Animated Gradient Border Vault Lock Brutalist Stamp Strength Meter

View the full collection →