24 CSS Login Form Designs with Live Demos

Liquid Slide

Animated sign in form with a brand stripe that slides in on mount and underlined inputs that draw outward from the centre on focus.

Pure CSS MIT licensed

Liquid Slide the 3rd 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-liquid">
  <div class="lf-liquid-stripe"></div>
  <div class="lf-liquid-body">
    <div class="lf-liquid-title">Account Login</div>
    <div class="lf-liquid-row">
      <input type="email" placeholder="Email" required />
    </div>
    <div class="lf-liquid-row">
      <input type="password" placeholder="Password" required />
    </div>
    <div class="lf-liquid-meta">
      <label><input type="checkbox" /> Remember me</label>
      <a href="#">Forgot?</a>
    </div>
    <button type="submit" class="lf-liquid-btn">Continue</button>
  </div>
</form>

.lf-liquid {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 64px 1fr;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-liquid-stripe {
  background: linear-gradient(180deg, #7c6cff, #ff6c8a);
  animation: lfqSlide 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
  position: relative;
}
.lf-liquid-stripe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 40%);
  mix-blend-mode: screen;
}
@keyframes lfqSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.lf-liquid-body {
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lf-liquid-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  letter-spacing: -0.01em;
}
.lf-liquid-row {
  position: relative;
}
.lf-liquid-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  font-size: 13px;
  background: transparent;
  color: #f0eeff;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  outline: none;
}
.lf-liquid-row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transition:
    left 0.28s ease,
    right 0.28s ease;
}
.lf-liquid-row:focus-within::after {
  left: 0;
  right: 0;
}
.lf-liquid-row input::placeholder {
  color: #b8b6d4;
}
.lf-liquid-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-liquid-meta a {
  color: #a78bfa;
  text-decoration: none;
}
.lf-liquid-meta input {
  accent-color: #7c6cff;
  margin-right: 4px;
}
.lf-liquid-btn {
  margin-top: 4px;
  padding: 10px 14px;
  background: #f0eeff;
  color: #15151d;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-liquid-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-liquid,
  .lf-liquid * {
    animation: none !important;
  }
}

More from 24 CSS Login Form Designs with Live Demos

Vault Lock Brutalist Stamp Strength Meter Pin Pad Inline Validation Constellation Biometric Prompt Show Password Toggle OTP Verify Aurora Glow Neon Synthwave Card Flip Reset

View the full collection →