24 CSS Login Form Designs with Live Demos

Card Flip Reset

CSS-only flip card login form. The card rotates in 3D to reveal a "forgot password" form on the back — driven entirely by a hidden checkbox and sibling selectors, no JavaScript.

Pure CSS MIT licensed

Card Flip Reset the 4th 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

<div class="lf-flip">
  <input type="checkbox" id="lf-flip-toggle" class="lf-flip-toggle" />
  <div class="lf-flip-stage">
    <form class="lf-flip-front">
      <div class="lf-flip-title">Sign in</div>
      <input type="email" placeholder="Email" required />
      <input type="password" placeholder="Password" required />
      <button type="submit">Log in</button>
      <label for="lf-flip-toggle" class="lf-flip-link">Forgot password?</label>
    </form>
    <form class="lf-flip-back">
      <div class="lf-flip-title">Reset password</div>
      <input type="email" placeholder="Email to send reset link" required />
      <button type="submit">Send link</button>
      <label for="lf-flip-toggle" class="lf-flip-link">← Back to sign in</label>
    </form>
  </div>
</div>

.lf-flip {
  width: 100%;
  max-width: 280px;
  perspective: 1200px;
}
.lf-flip-toggle {
  display: none;
}
.lf-flip-stage {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.3, 1.2);
  min-height: 240px;
}
.lf-flip-toggle:checked ~ .lf-flip-stage {
  transform: rotateY(180deg);
}
.lf-flip-front,
.lf-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.lf-flip-back {
  transform: rotateY(180deg);
}
.lf-flip-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 2px;
}
.lf-flip 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;
}
.lf-flip input:focus {
  border-color: #7c6cff;
}
.lf-flip button {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-flip-link {
  font-size: 11px;
  color: #a78bfa;
  text-align: center;
  cursor: pointer;
  margin-top: 4px;
}

More from 24 CSS Login Form Designs with Live Demos

Show Password Toggle OTP Verify Aurora Glow Neon Synthwave Liquid Slide Magic Link Terminal Prompt Floating Pill Gradient Border Side Panel Social First Animated Mascot

View the full collection →