24 CSS Login Form Designs with Live Demos

Compact Modal

Modal / dialog login form. Dense and professional, with subtle hover glow on inputs and a primary action that fills with brand colour on hover.

Pure CSS MIT licensed

Compact Modal the 12th 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-modal">
  <button type="button" class="lf-modal-close" aria-label="Close">×</button>
  <div class="lf-modal-title">Sign in to Codefronts</div>
  <div class="lf-modal-sub">Use your email and password to continue</div>
  <label class="lf-modal-row">
    <span>Email</span>
    <input type="email" placeholder="[email protected]" required />
  </label>
  <label class="lf-modal-row">
    <span>Password <a href="#">Forgot?</a></span>
    <input type="password" placeholder="••••••••" required />
  </label>
  <label class="lf-modal-check"> <input type="checkbox" /> Keep me signed in for 30 days </label>
  <button type="submit" class="lf-modal-submit">Sign in</button>
</form>

.lf-modal {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lf-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: #b8b6d4;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition:
    background 0.15s,
    color 0.15s;
  line-height: 1;
}
.lf-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f0eeff;
}
.lf-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-modal-sub {
  font-size: 12px;
  color: #b8b6d4;
  margin-top: -8px;
  margin-bottom: 4px;
}
.lf-modal-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-modal-row > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lf-modal-row > span a {
  color: #a78bfa;
  text-decoration: none;
  font-size: 11px;
}
.lf-modal-row 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,
    box-shadow 0.15s,
    background 0.15s;
}
.lf-modal-row input:hover {
  background: rgba(255, 255, 255, 0.06);
}
.lf-modal-row input:focus {
  border-color: #7c6cff;
  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15);
}
.lf-modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-modal-check input {
  accent-color: #7c6cff;
}
.lf-modal-submit {
  padding: 10px;
  background: rgba(124, 108, 255, 0.18);
  color: #c8c0ff;
  border: 1px solid rgba(124, 108, 255, 0.4);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.lf-modal-submit:hover {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border-color: transparent;
}

More from 24 CSS Login Form Designs with Live Demos

Side Panel Social First Animated Mascot Glass Frosted Step-by-Step Animated Gradient Border Vault Lock Brutalist Stamp Strength Meter Pin Pad Inline Validation Constellation

View the full collection →