24 CSS Login Form Designs with Live Demos

Neon Synthwave

Neon login form in 80s-synthwave style. Hot-pink and cyan outline glows pulse around inputs and the submit button using stacked text-shadow.

Pure CSS MIT licensed

Neon Synthwave the 2nd 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-neon">
  <div class="lf-neon-title">LOG <span>IN</span></div>
  <input type="email" placeholder="[email protected]" required class="lf-neon-input" />
  <input type="password" placeholder="••••••••" required class="lf-neon-input" />
  <button type="submit" class="lf-neon-btn">ENTER</button>
</form>

.lf-neon {
  width: 100%;
  max-width: 280px;
  background: #0a0014;
  border: 1px solid rgba(255, 108, 255, 0.35);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    0 0 40px rgba(255, 108, 255, 0.15),
    inset 0 0 30px rgba(124, 108, 255, 0.1);
}
.lf-neon-title {
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  letter-spacing: 0.3em;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #ff6cff,
    0 0 24px #ff6cff;
}
.lf-neon-title span {
  color: #6cffff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #6cffff,
    0 0 24px #6cffff;
}
.lf-neon-input {
  background: transparent;
  border: 1px solid rgba(255, 108, 255, 0.45);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Courier New", monospace;
  color: #fff;
  font-size: 12px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.lf-neon-input::placeholder {
  color: rgba(255, 108, 255, 0.55);
}
.lf-neon-input:focus {
  border-color: #6cffff;
  box-shadow:
    0 0 0 1px #6cffff,
    0 0 16px rgba(108, 255, 255, 0.4);
}
.lf-neon-btn {
  background: transparent;
  border: 1px solid #6cffff;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #6cffff;
  cursor: pointer;
  text-shadow: 0 0 6px #6cffff;
  box-shadow:
    inset 0 0 12px rgba(108, 255, 255, 0.15),
    0 0 14px rgba(108, 255, 255, 0.3);
  animation: lfnPulse 1.6s ease-in-out infinite;
}
.lf-neon-btn:hover {
  color: #fff;
  background: rgba(108, 255, 255, 0.1);
}
@keyframes lfnPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 12px rgba(108, 255, 255, 0.15),
      0 0 14px rgba(108, 255, 255, 0.3);
  }
  50% {
    box-shadow:
      inset 0 0 18px rgba(108, 255, 255, 0.25),
      0 0 28px rgba(108, 255, 255, 0.55);
  }
}

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

More from 24 CSS Login Form Designs with Live Demos

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

View the full collection →