Minimal Clean

A simple centered card with a neutral palette and subtle shadow.

About This Template

A clean, distraction-free login screen: a centered white card, thin borders, a single accent button and clear typographic hierarchy. Works well for admin panels, dashboards, and any product that wants to stay out of the way of the task at hand.

Login PageCategory

HTML & CSSFormat

MinimalNeutralLight

Full Preview

Minimal Clean login page template preview

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login — Minimal Clean</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="login-wrap">
    <section class="login-card">
      <div class="brand-mark">M</div>
      <h1>Welcome back</h1>
      <p class="subtitle">Sign in to your account to continue</p>

      <form class="login-form">
        <label class="field">
          <span>Email address</span>
          <input type="email" placeholder="you@example.com" required>
        </label>
        <label class="field">
          <span>Password</span>
          <input type="password" placeholder="••••••••" required>
        </label>

        <div class="row-between">
          <label class="checkbox">
            <input type="checkbox">
            <span>Remember me</span>
          </label>
          <a href="#" class="link">Forgot password?</a>
        </div>

        <button type="submit" class="btn-primary">Sign In</button>
      </form>

      <div class="divider"><span>or continue with</span></div>

      <div class="social-row">
        <button class="btn-social" type="button">Google</button>
        <button class="btn-social" type="button">GitHub</button>
      </div>

      <p class="footer-text">Don't have an account? <a href="#">Create one</a></p>
    </section>
  </main>
</body>
</html>

style.css

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  background: #f9fafb;
  color: #111827;
  min-height: 100vh;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(17, 24, 39, 0.06);
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 20px;
}

h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
}

.subtitle {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 28px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.field input {
  font: inherit;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-weight: 400;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.field input:focus {
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  cursor: pointer;
}

.checkbox input { accent-color: #111827; }

.link {
  color: #111827;
  text-decoration: none;
  font-weight: 600;
}
.link:hover { text-decoration: underline; }

.btn-primary {
  margin-top: 4px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-primary:hover { background: #1f2937; }
.btn-primary:active { transform: scale(0.98); }

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
  margin: 24px 0;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.divider span { padding: 0 12px; }

.social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-social {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background .15s;
}
.btn-social:hover { background: #f3f4f6; }

.footer-text {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}
.footer-text a {
  color: #111827;
  font-weight: 600;
  text-decoration: none;
}
.footer-text a:hover { text-decoration: underline; }