This floating label signup form improves clarity and reduces visual clutter, creating a clean onboarding experience for modern web apps.
HTML
<form class="signup-float">
<div class="field">
<input type="text" required>
<label>Full Name</label>
</div>
<div class="field">
<input type="email" required>
<label>Email</label>
</div>
<div class="field">
<input type="password" required>
<label>Password</label>
</div>
<button>Create Account</button>
</form>CSS
:root{
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e5e7eb;
--primary:#2563eb;
}
@media (prefers-color-scheme: dark){
:root{
--card:#020617;
--text:#e5e7eb;
--muted:#94a3b8;
--border:#1f2937;
--primary:#3b82f6;
}
}
.signup-float{
max-width:220px;
margin:auto;
padding:12px;
background:var(--card);
border-radius:12px;
border:1px solid var(--border);
font-size:11px;
color:var(--text);
}
.field{
position:relative;
margin-bottom:10px;
}
.field input{
width:100%;
padding:8px 8px;
border-radius:8px;
border:1px solid var(--border);
background:transparent;
color:var(--text);
font-size:11px;
outline:none;
}
.field label{
position:absolute;
left:8px;
top:50%;
transform:translateY(-50%);
font-size:11px;
color:var(--muted);
padding:0 4px;
pointer-events:none;
transition:.2s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
top:-6px;
font-size:9px;
background:var(--card);
color:var(--primary);
}
.signup-float button{
width:100%;
padding:8px;
border:none;
border-radius:8px;
background:var(--primary);
color:#fff;
font-size:11px;
font-weight:600;
cursor:pointer;
}Notes
- Clean floating labels
- Accessible structure
- SaaS-ready onboarding UI
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.