24 CSS Login Form Designs with Live Demos

Terminal Prompt

Terminal-style login form. Monospace prompts, a blinking caret, and a green command-line submit — perfect for developer tools and CLI dashboards.

Pure CSS MIT licensed

Terminal Prompt the 6th 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-term">
  <div class="lf-term-bar">
    <span class="lf-term-dot r"></span>
    <span class="lf-term-dot y"></span>
    <span class="lf-term-dot g"></span>
    <span class="lf-term-title">~/login</span>
  </div>
  <div class="lf-term-body">
    <div class="lf-term-line"><span class="lf-term-prompt">$</span> auth login</div>
    <div class="lf-term-line">
      <span class="lf-term-prompt">user:</span>
      <input type="email" placeholder="[email protected]" required />
    </div>
    <div class="lf-term-line">
      <span class="lf-term-prompt">pass:</span>
      <input type="password" placeholder="••••••••" required />
    </div>
    <button type="submit" class="lf-term-btn">$ run<span class="lf-term-caret">_</span></button>
  </div>
</form>

.lf-term {
  width: 100%;
  max-width: 320px;
  background: #0a0a0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  font-family: "JetBrains Mono", "DM Mono", monospace;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
.lf-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #15151d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.lf-term-dot.r {
  background: #ff6c8a;
}
.lf-term-dot.y {
  background: #f5b454;
}
.lf-term-dot.g {
  background: #2eb88a;
}
.lf-term-title {
  margin-left: auto;
  font-size: 11px;
  color: #b8b6d4;
  letter-spacing: 0.05em;
}
.lf-term-body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #a5f0c8;
  font-size: 13px;
}
.lf-term-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lf-term-prompt {
  color: #7c6cff;
  flex-shrink: 0;
  font-weight: 600;
}
.lf-term-line input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 2px 0;
  caret-color: #2eb88a;
}
.lf-term-line input::placeholder {
  color: #4a4a5e;
}
.lf-term-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  background: rgba(46, 184, 138, 0.08);
  border: 1px solid rgba(46, 184, 138, 0.4);
  color: #2eb88a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
}
.lf-term-btn:hover {
  background: rgba(46, 184, 138, 0.18);
}
.lf-term-caret {
  display: inline-block;
  margin-left: 2px;
  color: #2eb88a;
  animation: lftBlink 1s step-end infinite;
}
@keyframes lftBlink {
  50% {
    opacity: 0;
  }
}

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

More from 24 CSS Login Form Designs with Live Demos

Step-by-Step Animated Gradient Border Vault Lock Brutalist Stamp Strength Meter Pin Pad Inline Validation Constellation Biometric Prompt Show Password Toggle OTP Verify Aurora Glow

View the full collection →