Passwordless Login UI

A passwordless login UI built with pure HTML and CSS that supports authentication without traditional password fields. It enhances secure access flow clarity and minimal credential input design within a clean, responsive layout.

Usage

Use this component when interfaces require OTP or email based authentication, such as SaaS platforms, mobile first applications, or systems prioritizing simplified login experiences.

Implementation

The layout uses a structured input grouping design for email or verification code entry, combined with clearly emphasized action buttons. CSS manages spacing, focus states, and responsive alignment across screen sizes.

HTML

<section class="login-passwordless">
  <p>Sign in with email</p>
  <button>Send Link</button>
</section>

<section class="login-passwordless">
  <p>Sign in with email</p>
  <button>Send Link</button>
</section>

CSS

.login-passwordless {
  width: 200px;
  padding: 1rem;
  border-radius: 16px;
  background: radial-gradient(circle at top, #eef2ff, #ffffff);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
  text-align: center;
  display: grid;
  gap: 0.5rem;
}

.login-passwordless p {
  font-size: 12px;
  color: #374151;
}

.login-passwordless button {
  padding: 0.45rem;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease;
}

.login-passwordless button:hover {
  transform: scale(1.05);
}

@media (prefers-color-scheme: dark) {
  .login-passwordless {
    background: radial-gradient(circle at top, #1e1b4b, #020617);
    color: #e5e7eb;
  }

  .login-passwordless p {
    color: #d1d5db;
  }
}

.login-passwordless {
  width: 200px;
  padding: 1rem;
  border-radius: 16px;
  background: radial-gradient(circle at top, #eef2ff, #ffffff);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
  text-align: center;
  display: grid;
  gap: 0.5rem;
}

.login-passwordless p {
  font-size: 12px;
  color: #374151;
}

.login-passwordless button {
  padding: 0.45rem;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease;
}

.login-passwordless button:hover {
  transform: scale(1.05);
}

@media (prefers-color-scheme: dark) {
  .login-passwordless {
    background: radial-gradient(circle at top, #1e1b4b, #020617);
    color: #e5e7eb;
  }

  .login-passwordless p {
    color: #d1d5db;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Designed for passwordless authentication flows
• Enhances minimal input security layout
• Fully responsive across breakpoints
• Suitable for SaaS and web applications
• Easy to customize input styling and spacing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.