CSS password strength form | HTML, CSS & JavaScript

<label>Password</label>

<div class="strength-box">

<div class="strength-header">
            <span>Password Strength</span>
            <span id="strengthText">Enter password</span>
        </div>

</div>

<div class="requirements">
        <div id="length">
            <span>○</span> 8+ characters
        </div>
        <div id="uppercase">
            <span>○</span> Uppercase letter
        </div>

<div id="lowercase">
            <span>○</span> Lowercase letter
        </div>
        <div id="number">
            <span>○</span> Number
        </div>
        <div id="special">
            <span>○</span> Special character
        </div>
    </div>

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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:Arial, sans-serif;
    background:
        radial-gradient(circle at top left,#182848,#0f172a 45%,#020617);
    overflow:hidden;
}

/* Animated Background */
body::before,
body::after{
    content:"";
    position:fixed;
    width:300px;
    height:300px;
    border-radius:50%;
    filter:blur(90px);
    opacity:.35;
    animation:float 8s infinite alternate ease-in-out;
}

body::before{
    background:#00e5ff;
    top:-100px;
    left:-100px;
}

body::after{
    background:#7c3aed;
    bottom:-100px;
    right:-100px;
    animation-delay:2s;
}

@keyframes float{
    from{
        transform:translate(0,0);
    }
    to{
        transform:translate(80px,50px);
    }
}

/* Form */
.login-box{
    width:390px;
    padding:40px;
    border-radius:25px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(20px);
    box-shadow:
        0 25px 70px rgba(0,0,0,.5),
        inset 0 0 30px rgba(255,255,255,.03);
    position:relative;
    z-index:2;
}

.logo{
    width:65px;
    height:65px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    font-size:28px;
    color:white;
    background:linear-gradient(135deg,#00e5ff,#7c3aed);
    box-shadow:0 0 30px rgba(0,229,255,.35);
}

h2{
    text-align:center;
    color:#fff;
    font-size:28px;
    margin-bottom:8px;
}

.subtitle{
    text-align:center;
    color:#94a3b8;
    font-size:14px;
    margin-bottom:30px;
}

/* Input */
.input-group{
    position:relative;
    margin-bottom:20px;
}

.input-group input{
    width:100%;
    height:55px;
    padding:0 50px 0 18px;
    border:none;
    outline:none;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    font-size:15px;
    transition:.3s;
}

.input-group input:focus{
    border-color:#00e5ff;
    box-shadow:0 0 20px rgba(0,229,255,.15);
}

.input-group label{
    position:absolute;
    left:18px;
    top:18px;
    color:#94a3b8;
    pointer-events:none;
    transition:.3s;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
    top:-9px;
    left:14px;
    padding:0 6px;
    font-size:11px;
    color:#00e5ff;
    background:#101827;
}

/* Password Toggle */
.toggle{
    position:absolute;
    right:18px;
    top:18px;
    color:#94a3b8;
    cursor:pointer;
    font-size:18px;
}

/* Strength */
.strength-box{
    margin-top:-5px;
    margin-bottom:18px;
}

.strength-header{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-bottom:8px;
    color:#94a3b8;
}

#strengthText{
    font-weight:bold;
}

.strength-bar{
    width:100%;
    height:6px;
    background:#1e293b;
    border-radius:10px;
    overflow:hidden;
}

#strengthFill{
    width:0%;
    height:100%;
    border-radius:10px;
    transition:.4s ease;
}

/* Requirements */
.requirements{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-bottom:25px;
}

.requirements div{
    font-size:12px;
    color:#64748b;
    transition:.3s;
}

.requirements div.valid{
    color:#22c55e;
}

.requirements span{
    display:inline-block;
    width:16px;
}

/* Button */
button{
    width:100%;
    height:55px;
    border:0;
    border-radius:14px;
    cursor:pointer;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    background:linear-gradient(135deg,#00bcd4,#7c3aed);
    box-shadow:0 10px 25px rgba(124,58,237,.3);
    transition:.3s;
    position:relative;
    overflow:hidden;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:
        0 15px 35px rgba(0,229,255,.25),
        0 10px 30px rgba(124,58,237,.35);
}

button:active{
    transform:scale(.97);
}

button::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:skewX(-20deg);
    transition:.6s;
}

button:hover::before{
    left:130%;
}

/* Footer */
.footer{
    text-align:center;
    color:#64748b;
    font-size:12px;
    margin-top:22px;
}

.footer span{
    color:#00e5ff;
    cursor:pointer;
}

/* Mobile */
@media(max-width:450px){
    .login-box{
        width:calc(100% - 30px);
        padding:30px 25px;
    }

.requirements{
        grid-template-columns:1fr;
    }
}

const password = document.getElementById("password");
const strengthFill = document.getElementById("strengthFill");
const strengthText = document.getElementById("strengthText");

const requirements = {
    length: document.getElementById("length"),
    uppercase: document.getElementById("uppercase"),
    lowercase: document.getElementById("lowercase"),
    number: document.getElementById("number"),
    special: document.getElementById("special")
};

/* Password Toggle */

document.getElementById("togglePassword")
.addEventListener("click", function(){

if(password.type === "password"){
        password.type = "text";
        this.textContent = "🙈";
    }else{
        password.type = "password";
        this.textContent = "👁";
    }

});

/* Password Strength */

password.addEventListener("input", function(){

const value = password.value;

const checks = {
        length: value.length >= 8,
        uppercase: /[A-Z]/.test(value),
        lowercase: /[a-z]/.test(value),
        number: /[0-9]/.test(value),
        special: /[^A-Za-z0-9]/.test(value)
    };

let score = Object.values(checks)
        .filter(Boolean).length;

/* Update Requirements */

Object.keys(checks).forEach(key => {

if(checks[key]){

requirements[key].classList.add("valid");

requirements[key].querySelector("span")
                .textContent = "✓";

}else{

requirements[key].classList.remove("valid");

requirements[key].querySelector("span")
                .textContent = "○";

}

});

/* Strength */

let width = score * 20;

strengthFill.style.width = width + "%";

if(value.length === 0){

strengthText.textContent = "Enter password";
        strengthFill.style.width = "0%";

}else if(score <= 2){

strengthText.textContent = "Weak";
        strengthFill.style.background = "#ef4444";

}else if(score === 3){

strengthText.textContent = "Medium";
        strengthFill.style.background = "#f59e0b";

}else if(score === 4){

strengthText.textContent = "Strong";
        strengthFill.style.background = "#22c55e";

}else{

strengthText.textContent = "Very Strong";
        strengthFill.style.background =
            "linear-gradient(90deg,#00e5ff,#22c55e)";

}

});

/* Demo Sign In */

document.getElementById("loginBtn")
.addEventListener("click", function(){

if(password.value.length < 8){

password.focus();

password.style.borderColor = "#ef4444";

setTimeout(()=>{
            password.style.borderColor = "";
        },1000);

return;
    }

this.textContent = "✓ Signed In";

setTimeout(()=>{
        this.textContent = "Sign In";
    },2000);

});

- CSS password strength form

Live Preview