• HTML
• CSS
• JS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="pwd">
    <div class="overlay"></div>
    <div>
        <i class="fas fa-lock"></i>
        <input type = "password" placeholder = "Password...">
        <i class="fas fa-eye-slash"></i>
    </div>
</div>

CSS

body{
    margin:0;
    background:#dbdbdb;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}
.pwd{
    background:#111625;
    border-radius:12px;
    box-shadow:rgba(100,100,111,0.5) 0px 7px 29px 0px;
    position:relative;
}
.pwd input{
    background:transparent;
    border:none;
    font-size:1.2em;
    color:#5358b9;
}
.pwd input:focus{
    outline:none;
}
.pwd i{
    font-size:1.4em;
    padding:1em;
    color:#dbdbdb;
    transition:0.3s;
}
.pwd .fa-eye,
.pwd .fa-eye-slash{
    cursor:pointer;
    color:#5358b9;
    width:1.2em;
}
.pwd .overlay{
    position:absolute;
    top:50%;
    right:1em;
    transform:translateY(-50%);
    background:#dbdbdb;
    width:2.5em;
    height:2.5em;
    border-radius:50%;
    z-index:0;
    transition:0.5s ease-in-out;
}
.pwd .overlay-cover{
    width:100%;
    height:100%;
    border-radius:12px;
    right:0;
}
.pwd>div:nth-child(2){
    position:relative;
}

JS

//Get all of the necessary elements
const input = document.querySelector(".pwd input");
const eye = document.querySelector(".pwd .fa-eye-slash");
const lock = document.querySelector(".pwd .fa-lock");
const overlay = document.querySelector(".pwd .overlay");

//Add a click event to the eye icon
eye.addEventListener("click",() => {
    //If the password is hidden...
    if(input.type === "password"){
        //...Show it
        input.type = "text";
        //Toggle between eye icons
        eye.classList.remove("fa-eye-slash");
        eye.classList.add("fa-eye");
        //Change the color of the lock icon in 500ms
        setTimeout(() => {
            lock.style.color = "#111625";
        },500);
        //If the password eye icons
    }else{
        //...Hide it
        input.type = "password";
        //Toggle between eye icons
        eye.classList.remove("fa-eye");
        eye.classList.add("fa-eye-slash");
        //Change the color of the Lock icon
        lock.style.color = "#dbdbdb";
    }
    //Toggle the overlay
    overlay.classList.toggle("overlay-cover");
});

/*
    All the credits to: https://www.youtube.com/watch?v=JwKLedkv-Ks 
*/