24 CSS Login Form Designs with Live Demos

Side Panel

Two-column SaaS login layout. A brand panel on the left with a subtle parallax shape, and a clean sign in form on the right — the classic dashboard pattern.

Pure CSS MIT licensed

Side Panel the 9th 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-side">
  <aside class="lf-side-brand">
    <div class="lf-side-shape"></div>
    <div class="lf-side-logo">CF</div>
    <div class="lf-side-tag">Build the front-end<br />you've been imagining.</div>
  </aside>
  <div class="lf-side-form">
    <div class="lf-side-title">Sign in</div>
    <input type="email" placeholder="Work email" required />
    <input type="password" placeholder="Password" required />
    <button type="submit">Continue →</button>
    <a href="#" class="lf-side-foot">Forgot your password?</a>
  </div>
</form>

.lf-side {
  display: grid;
  grid-template-columns: 110px 1fr;
  width: 100%;
  max-width: 360px;
  min-height: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
}
.lf-side-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #7c6cff 0%, #5b48d6 60%, #2a1f7a 100%);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.lf-side-shape {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  animation: lfsBlob 8s ease-in-out infinite alternate;
}
@keyframes lfsBlob {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-10px, 12px) scale(1.15);
  }
}
.lf-side-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.18);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
.lf-side-tag {
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.92;
}
.lf-side-form {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lf-side-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 4px;
}
.lf-side-form input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-side-form input:focus {
  border-color: #7c6cff;
}
.lf-side-form button {
  margin-top: 4px;
  padding: 10px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-side-foot {
  font-size: 11px;
  color: #a78bfa;
  text-decoration: none;
  text-align: center;
  margin-top: 2px;
}

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

More from 24 CSS Login Form Designs with Live Demos

Compact Modal Glass Frosted Step-by-Step Animated Gradient Border Vault Lock Brutalist Stamp Strength Meter Pin Pad Inline Validation Constellation Biometric Prompt Show Password Toggle

View the full collection →