CSS Advanced OTP Verification | HTML, CSS & JavaScript

<div id="phoneScreen">
        <div class="otp-icon">🔐</div>
        <h1>Secure Login</h1>
        <p class="subtitle">
            Enter your mobile number to receive a
            one-time verification code.
        </p>
        <div class="phone-box">
            <label>Mobile Number</label>
            <div class="phone-input">
                <select class="country">
                    <option>+91</option>
                    <option>+1</option>
                </select>
                <input type="tel" id="phone" class="phone"
                    placeholder="Enter mobile number" maxlength="10">
            </div>
        </div>
        <button class="btn" onclick="sendOTP()">Send OTP →</button>
        <div class="progress">
            <div class="progress-bar"></div>
        </div>
    </div>

<h1>Verify OTP</h1>

<p class="subtitle">
            We've sent a 6-digit verification code to
            <br>
            <strong id="displayPhone"></strong>
        </p>

</div>

Code expires in
            <span id="timer">01:00</span>

</div>

<button class="btn" onclick="verifyOTP()">
            Verify OTP ✓
        </button>

Didn't receive the code?

<button
                id="resendBtn"
                onclick="resendOTP()"
                disabled
            >
                Resend OTP
            </button>

</div>

<button onclick="changeNumber()">
                ← Change mobile number
            </button>

</div>

</div>

<h1>Verified!</h1>

<p class="subtitle">
            Your mobile number has been successfully
            verified.
        </p>

<button class="btn" onclick="location.reload()">
            Continue →
        </button>

</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,#243b55,transparent 40%),
        radial-gradient(circle at bottom right,#1d2671,transparent 40%),
        #090d18;
    color:#fff;
}

/* MAIN CONTAINER */

.otp-wrapper{
    width:420px;
    padding:35px;
    border-radius:30px;

background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

box-shadow:
        20px 20px 50px rgba(0,0,0,.5),
        inset 2px 2px 5px rgba(255,255,255,.05),
        inset -3px -3px 8px rgba(0,0,0,.3);

position:relative;
    overflow:hidden;
}

/* GLOW */

.otp-wrapper::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:#4f8cff;
    filter:blur(100px);
    opacity:.15;
    top:-100px;
    left:-80px;
}

/* ICON */

.otp-icon{
    width:80px;
    height:80px;
    margin:auto;

display:flex;
    justify-content:center;
    align-items:center;

font-size:35px;

border-radius:50%;

background:linear-gradient(145deg,#171e2f,#0d111c);

box-shadow:
        8px 8px 15px rgba(0,0,0,.5),
        -5px -5px 12px rgba(255,255,255,.04);

animation:float 3s ease-in-out infinite;
}

@keyframes float{
    50%{
        transform:translateY(-6px);
    }
}

/* TITLE */

h1{
    text-align:center;
    margin-top:22px;
    font-size:27px;
}

.subtitle{
    text-align:center;
    color:#9da7bb;
    margin-top:10px;
    line-height:1.6;
    font-size:14px;
}

/* PHONE */

.phone-box{
    margin-top:28px;
}

.phone-box label{
    font-size:13px;
    color:#aeb7ca;
}

.phone-input{
    margin-top:9px;
    display:flex;
    gap:10px;
}

.country{
    width:75px;
    border-radius:12px;
    border:none;
    outline:none;

background:#101624;
    color:#fff;
    padding:0 12px;
}

.phone{
    flex:1;
    border:none;
    outline:none;
    border-radius:12px;

padding:15px;

background:#101624;
    color:#fff;

box-shadow:
        inset 3px 3px 8px rgba(0,0,0,.5),
        inset -2px -2px 5px rgba(255,255,255,.03);
}

/* BUTTON */

.btn{
    width:100%;
    margin-top:20px;
    padding:15px;

border:none;
    border-radius:14px;

color:#fff;
    font-weight:bold;
    font-size:15px;

cursor:pointer;

background:linear-gradient(135deg,#4f8cff,#7b61ff);

box-shadow:
        0 8px 20px rgba(79,140,255,.25);

transition:.3s;
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 12px 28px rgba(79,140,255,.4);
}

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

/* OTP SCREEN */

#otpScreen{
    display:none;
}

/* OTP BOXES */

.otp-container{
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:28px;
}

.otp{
    width:48px;
    height:58px;

text-align:center;

font-size:22px;
    font-weight:bold;

color:#fff;

border-radius:12px;

border:1px solid transparent;

outline:none;

background:#101624;

box-shadow:
        inset 4px 4px 8px rgba(0,0,0,.5),
        inset -3px -3px 6px rgba(255,255,255,.03);

transition:.25s;
}

.otp:focus{
    border-color:#5c8dff;

box-shadow:
        0 0 0 3px rgba(92,141,255,.12),
        inset 3px 3px 8px rgba(0,0,0,.5);

transform:translateY(-3px);
}

/* TIMER */

.timer{
    text-align:center;
    margin-top:20px;

font-size:13px;
    color:#9da7bb;
}

.timer span{
    color:#6fa0ff;
    font-weight:bold;
}

/* RESEND */

.resend{
    text-align:center;
    margin-top:15px;
    font-size:13px;
    color:#8f9ab0;
}

.resend button{
    background:none;
    border:none;
    color:#6fa0ff;
    cursor:pointer;
    font-weight:bold;
}

.resend button:disabled{
    opacity:.35;
    cursor:not-allowed;
}

/* CHANGE NUMBER */

.change-number{
    text-align:center;
    margin-top:18px;
}

.change-number button{
    border:none;
    background:none;
    color:#aaa;
    cursor:pointer;
    font-size:12px;
}

/* PROGRESS */

.progress{
    height:4px;
    background:#151c2c;
    border-radius:10px;
    margin-top:25px;
    overflow:hidden;
}

.progress-bar{
    height:100%;
    width:50%;

background:linear-gradient(
        90deg,
        #4f8cff,
        #9b6cff
    );

transition:.5s;
}

/* SUCCESS */

.success{
    display:none;
    text-align:center;
}

.success-icon{
    width:90px;
    height:90px;

margin:20px auto;

display:flex;
    align-items:center;
    justify-content:center;

border-radius:50%;

background:#102a22;

font-size:40px;

box-shadow:
        0 0 0 8px rgba(45,211,144,.08);

animation:successPop .5s ease;
}

@keyframes successPop{

0%{
        transform:scale(.4);
        opacity:0;
    }

100%{
        transform:scale(1);
        opacity:1;
    }

}

/* ERROR */

.error{
    animation:shake .35s;
}

@keyframes shake{

0%,100%{
        transform:translateX(0);
    }

25%{
        transform:translateX(-7px);
    }

75%{
        transform:translateX(7px);
    }

}

/* MOBILE */

@media(max-width:480px){

.otp-wrapper{
        width:92%;
        padding:25px 20px;
    }

.otp{
        width:42px;
        height:54px;
    }

.otp-container{
        gap:6px;
    }

}

let timerInterval;
let timeLeft = 60;

/* SEND OTP */

function sendOTP(){

const phone =
        document.getElementById("phone").value;

if(phone.length !== 10){

alert("Please enter a valid 10-digit mobile number.");

return;
    }

document.getElementById("phoneScreen")
        .style.display = "none";

document.getElementById("otpScreen")
        .style.display = "block";

document.getElementById("displayPhone")
        .innerText = "+91 " + phone;

startTimer();

document.querySelector(".otp").focus();

}

/* OTP AUTO FOCUS */

const otpInputs =
    document.querySelectorAll(".otp");

otpInputs.forEach((input,index)=>{

input.addEventListener("input",(e)=>{

input.value =
            input.value.replace(/\D/g,"");

if(input.value && index < otpInputs.length-1){

otpInputs[index+1].focus();

}

});

input.addEventListener("keydown",(e)=>{

if(
            e.key === "Backspace" &&
            !input.value &&
            index > 0
        ){

otpInputs[index-1].focus();

}

});

/* PASTE OTP */

document
.getElementById("otpContainer")
.addEventListener("paste",(e)=>{

e.preventDefault();

const data =
        e.clipboardData
        .getData("text")
        .replace(/\D/g,"")
        .slice(0,6);

[...otpInputs].forEach((input,index)=>{

input.value = data[index] || "";

});

if(data.length === 6){

otpInputs[5].focus();

}

});

/* TIMER */

function startTimer(){

clearInterval(timerInterval);

timeLeft = 60;

updateTimer();

document.getElementById("resendBtn")
        .disabled = true;

timerInterval =
        setInterval(()=>{

timeLeft--;

updateTimer();

if(timeLeft <= 0){

clearInterval(timerInterval);

document.getElementById("resendBtn")
                    .disabled = false;

}

},1000);

}

function updateTimer(){

const minutes =
        Math.floor(timeLeft/60)
        .toString()
        .padStart(2,"0");

const seconds =
        (timeLeft%60)
        .toString()
        .padStart(2,"0");

document.getElementById("timer")
        .innerText =
        `${minutes}:${seconds}`;

}

/* VERIFY OTP */

function verifyOTP(){

let otp = "";

otpInputs.forEach(input=>{

otp += input.value;

});

if(otp.length !== 6){

shakeOTP();

return;
    }

/*
       DEMO OTP

Replace this section with
       your backend/API verification.
    */

if(otp === "123456"){

clearInterval(timerInterval);

document.getElementById("otpScreen")
            .style.display = "none";

document.getElementById("successScreen")
            .style.display = "block";

}else{

shakeOTP();

otpInputs.forEach(input=>{
            input.value = "";
        });

otpInputs[0].focus();

}

/* SHAKE */

function shakeOTP(){

const container =
        document.getElementById("otpContainer");

container.classList.remove("error");

void container.offsetWidth;

container.classList.add("error");

}

/* RESEND */

function resendOTP(){

alert("New OTP sent!");

otpInputs.forEach(input=>{
        input.value = "";
    });

otpInputs[0].focus();

startTimer();

}

/* CHANGE NUMBER */

function changeNumber(){

clearInterval(timerInterval);

document.getElementById("otpScreen")
        .style.display = "none";

document.getElementById("phoneScreen")
        .style.display = "block";

}

- CSS Advanced OTP Verification

Live Preview