HTML5 CSS3 JavaScript WEB

3D Morphing Authentication Form

Modern login and registration form featuring an advanced Morphing transition effect. The card dynamically transforms into an animated circle before switching between authentication views, combining Glassmorphism, 3D rotation, glowing reflections, and cursor tracking interactions. Designed with an elegant gold, red, and brown color palette to deliver a premium user experience inspired by high-end modern interfaces. Built using pure HTML, CSS, and JavaScript.

Live Preview

Source Code

Copy this code and use it in your projects.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morphing Authentication</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="background-glow"></div>

<div class="scene">

    <div class="card" id="card">

        <div class="shine"></div>

        <div class="loader" id="loader">
            ★
        </div>

        <div class="face login" id="loginFace">

            <div class="logo">★</div>

            <h2>Welcome Back</h2>

            <input type="email" placeholder="Email Address">
            <input type="password" placeholder="Password">

            <button>
                Sign In
            </button>

            <p>
                Don't have an account?
                <a href="#" id="registerBtn">
                    Create Account
                </a>
            </p>

        </div>

        <div class="face register" id="registerFace">

            <div class="logo">★</div>

            <h2>Create Account</h2>

            <input type="text" placeholder="Full Name">
            <input type="email" placeholder="Email Address">
            <input type="password" placeholder="Password">
            <input type="password" placeholder="Confirm Password">

            <button>
                Create Account
            </button>

            <p>
                Already have an account?
                <a href="#" id="loginBtn">
                    Sign In
                </a>
            </p>

        </div>

    </div>

</div>

<script src="app.js"></script>

</body>
</html>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,sans-serif;
}

:root{
    --gold:#D4AF37;
    --gold-light:#F4D160;
    --red:#8B1E1E;
    --brown:#2C1810;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

    background:
    radial-gradient(circle at top left,var(--red),transparent 35%),
    radial-gradient(circle at bottom right,var(--gold),transparent 35%),
    linear-gradient(135deg,var(--brown),#140c09);
}

.background-glow{
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:rgba(212,175,55,.08);
    filter:blur(100px);
    animation:floatGlow 10s ease-in-out infinite;
}

.scene{
    perspective:2500px;
}

.card{
    position:relative;

    width:420px;
    height:560px;

    border-radius:28px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

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

    overflow:hidden;

    transform-style:preserve-3d;

    box-shadow:
    0 25px 100px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,255,255,.2);

    transition:
    width .7s ease,
    height .7s ease,
    border-radius .7s ease;
}

.card::before{
    content:"";
    position:absolute;
    inset:-2px;

    border-radius:inherit;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        transparent,
        var(--red)
    );

    filter:blur(12px);

    opacity:.6;

    z-index:-1;
}

.card.morph{
    width:120px;
    height:120px;
    border-radius:50%;
}

.face{
    position:absolute;

    inset:0;

    padding:40px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    transition:.4s;
}

.face.hide{
    opacity:0;
    pointer-events:none;
}

.register{
    display:none;
}

.logo{
    width:90px;
    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

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

    font-size:2rem;
    color:white;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--red)
    );

    box-shadow:
    0 0 40px rgba(212,175,55,.5);
}

h2{
    color:white;
    text-align:center;
    margin-bottom:25px;
}

input{
    width:100%;
    padding:15px;
    margin-bottom:15px;

    border:none;
    outline:none;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:white;
}

input::placeholder{
    color:rgba(255,255,255,.7);
}

button{
    border:none;
    cursor:pointer;

    padding:15px;

    border-radius:12px;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--red)
    );

    transition:.3s;
}

button:hover{
    transform:translateY(-3px);
}

p{
    margin-top:20px;
    color:white;
    text-align:center;
}

a{
    color:var(--gold-light);
    text-decoration:none;
}

.shine{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.shine::before{
    content:"";

    position:absolute;

    width:200%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    animation:shine 5s linear infinite;
}

.loader{
    position:absolute;

    inset:0;

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

    font-size:3rem;
    color:white;

    opacity:0;

    pointer-events:none;

    z-index:50;
}

.card.morph .loader{
    opacity:1;
    animation:spin 1s linear infinite;
}

.card.morph .face{
    opacity:0;
    pointer-events:none;
}

@keyframes shine{

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }

}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes floatGlow{

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

    50%{
        transform:translate(100px,-50px);
    }

}

@media(max-width:480px){

    .card{
        width:90%;
        height:560px;
    }

}

JavaScript

const card = document.getElementById("card");

const loginFace = document.getElementById("loginFace");
const registerFace = document.getElementById("registerFace");

let currentView = "login";

function switchView(target){

    if(target === currentView) return;

    card.classList.add("morph");

    setTimeout(() => {

        if(target === "register"){

            loginFace.style.display = "none";
            registerFace.style.display = "flex";

        }else{

            registerFace.style.display = "none";
            loginFace.style.display = "flex";

        }

    },700);

    setTimeout(() => {

        card.classList.remove("morph");
        currentView = target;

    },1400);

}

document.addEventListener("click",(e)=>{

    if(e.target.id === "registerBtn"){

        e.preventDefault();
        switchView("register");

    }

    if(e.target.id === "loginBtn"){

        e.preventDefault();
        switchView("login");

    }

});

document.addEventListener("mousemove",(e)=>{

    if(card.classList.contains("morph")) return;

    const x =
    (window.innerWidth/2 - e.clientX)/40;

    const y =
    (window.innerHeight/2 - e.clientY)/40;

    card.style.transform =
    `rotateY(${-x}deg) rotateX(${y}deg)`;

});