This signup form includes a password strength indicator to guide users toward creating secure passwords.
HTML
<form class="signup-strength">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<div class="strength">Strength: Strong</div>
<button>Sign Up</button>
</form>CSS
:root{
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e5e7eb;
--primary:#2563eb;
--success:#16a34a;
--warning:#f59e0b;
--danger:#ef4444;
}
@media (prefers-color-scheme: dark){
:root{
--card:#020617;
--text:#e5e7eb;
--muted:#94a3b8;
--border:#1f2937;
--primary:#3b82f6;
--success:#22c55e;
--warning:#fbbf24;
--danger:#f87171;
}
}
.signup-strength{
max-width:240px;
margin:auto;
padding:14px;
background:var(--card);
border-radius:14px;
border:1px solid var(--border);
font-size:12px;
color:var(--text);
}
.signup-strength input{
width:100%;
padding:9px 10px;
margin-bottom:10px;
border-radius:8px;
border:1px solid var(--border);
background:transparent;
color:var(--text);
font-size:12px;
outline:none;
}
.signup-strength input:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.strength{
margin:-4px 0 10px;
font-size:11px;
font-weight:500;
color:var(--success);
}
.strength.weak{ color:var(--danger); }
.strength.medium{ color:var(--warning); }
.strength.strong{ color:var(--success); }
.signup-strength button{
width:100%;
padding:9px;
border:none;
border-radius:8px;
background:var(--primary);
color:#ffffff;
font-size:12px;
font-weight:600;
cursor:pointer;
}Notes
- Improves password security
- Reduces weak passwords
- JS-ready indicator
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.