This floating label login form improves clarity and reduces placeholder reliance, creating a clean and accessible authentication experience.
HTML
<form class="login-form">
<h2>Welcome back</h2>
<p class="subtitle">Sign in to your account</p>
<div class="field">
<input type="email" id="email" required />
<label for="email">Email address</label>
</div>
<div class="field">
<input type="password" id="password" required />
<label for="password">Password</label>
</div>
<button type="submit">Sign In</button>
<p class="hint">Forgot your password?</p>
</form>CSS
:root {
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--primary:#2563eb;
--border:#e5e7eb;
}
@media (prefers-color-scheme: dark) {
:root {
--bg:#020617;
--card:#0f172a;
--text:#e5e7eb;
--muted:#94a3b8;
--primary:#3b82f6;
--border:#1e293b;
}
}
body {
background:var(--bg);
font-family:system-ui, sans-serif;
}
.login-form {
max-width:360px;
margin:40px auto;
padding:32px 24px;
background:var(--card);
border-radius:18px;
border:1px solid var(--border);
color:var(--text);
}
.login-form h2 {
margin-bottom:4px;
}
.subtitle {
font-size:.9rem;
color:var(--muted);
margin-bottom:24px;
}
.field {
position:relative;
margin-bottom:20px;
}
.field input {
width:100%;
padding:14px 12px;
font-size:.95rem;
border-radius:10px;
border:1px solid var(--border);
background:none;
color:var(--text);
outline:none;
}
.field label {
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
font-size:.9rem;
color:var(--muted);
background:var(--card);
padding:0 4px;
pointer-events:none;
transition:.2s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
top:-6px;
font-size:.7rem;
color:var(--primary);
}
.login-form button {
width:100%;
margin-top:8px;
padding:12px;
border-radius:999px;
border:none;
background:var(--primary);
color:#fff;
font-weight:600;
cursor:pointer;
}
.hint {
margin-top:16px;
font-size:.8rem;
color:var(--muted);
text-align:center;
}Notes
- Improves form clarity
- Accessible & modern UX
- Ideal for SaaS login flows
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.