24 CSS Login Form Designs with Live Demos

Brutalist Stamp

Brutalist login form with heavy borders, hard-edge offset shadow, and a stamp-style badge. A confident no-nonsense look for portfolios, dev tools, and editorial brands.

Pure CSS MIT licensed

Brutalist Stamp the 17th 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-brut" aria-label="Brutalist sign in">
  <span class="lf-brut-stamp" aria-hidden="true">
    <span>SECURE</span>
    <span>· AUTH ·</span>
    <span>2025</span>
  </span>
  <h2 class="lf-brut-title">Sign in.</h2>
  <p class="lf-brut-sub">No frills. Get back to work.</p>
  <label class="lf-brut-row">
    <span>EMAIL</span>
    <input type="email" name="email" autocomplete="email" placeholder="[email protected]" required />
  </label>
  <label class="lf-brut-row">
    <span>PASSWORD</span>
    <input
      type="password"
      name="password"
      autocomplete="current-password"
      placeholder="••••••••"
      required
    />
  </label>
  <button type="submit" class="lf-brut-btn">▸ ENTER</button>
</form>

.lf-brut {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #fef9c3;
  border: 2.5px solid #15151d;
  border-radius: 6px;
  padding: 22px 20px;
  display: grid;
  gap: 12px;
  box-shadow: 6px 6px 0 0 #15151d;
  font-family: "JetBrains Mono", "DM Mono", monospace;
}
.lf-brut-stamp {
  position: absolute;
  top: -14px;
  right: 12px;
  background: #ef4444;
  color: #fef9c3;
  border: 2px solid #15151d;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  display: inline-flex;
  gap: 6px;
  transform: rotate(2deg);
  box-shadow: 3px 3px 0 #15151d;
}
.lf-brut-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #15151d;
  letter-spacing: -0.02em;
}
.lf-brut-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: #4a4a5e;
}
.lf-brut-row {
  display: grid;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #15151d;
}
.lf-brut-row input {
  background: #fff;
  border: 2px solid #15151d;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #15151d;
  outline: none;
  transition:
    box-shadow 0.15s,
    transform 0.12s;
}
.lf-brut-row input:focus {
  box-shadow: 4px 4px 0 #15151d;
  transform: translate(-2px, -2px);
}
.lf-brut-btn {
  background: #15151d;
  color: #fef9c3;
  border: 2px solid #15151d;
  border-radius: 4px;
  padding: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.15s,
    background 0.15s,
    color 0.15s;
}
.lf-brut-btn:hover {
  background: #ef4444;
  color: #fef9c3;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #15151d;
}

More from 24 CSS Login Form Designs with Live Demos

Biometric Prompt Show Password Toggle OTP Verify Aurora Glow Neon Synthwave Liquid Slide Card Flip Reset Magic Link Terminal Prompt Floating Pill Gradient Border Side Panel

View the full collection →