Back to Snippets

Premium Multi-Role Login HTML

7 views • 440 lines • Responsive login form with floating labels and gradient background
Login system with Admin, Staff, Customer tabs
HTML • 440 lines
Download 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Multi Role Login</title>

<style>

:root{
    --dark:#0f172a;
    --card:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.15);
    --admin:#ef4444;
    --owner:#8b5cf6;
    --user:#06b6d4;
}

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

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

    background:
    linear-gradient(
    135deg,
    #020617,
    #172554,
    #312e81,
    #0f172a
    );
}

/* Background */

.bg-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.5;
    animation:move 12s infinite ease-in-out;
}

.c1{
    width:350px;
    height:350px;
    background:#8b5cf6;
    top:-100px;
    left:-100px;
}

.c2{
    width:300px;
    height:300px;
    background:#06b6d4;
    right:-80px;
    bottom:-80px;
}

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

/* Main Card */

.login-wrapper{

    width:100%;
    max-width:950px;

    display:grid;
    grid-template-columns:1fr 1fr;

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.4);

    animation:appear .8s ease;
}

@keyframes appear{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Left */

.preview{

    padding:50px;

    color:white;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
    );
}

.preview h1{
    font-size:2rem;
    margin-bottom:15px;
}

.preview p{
    color:#cbd5e1;
    margin-bottom:30px;
}

.stat-cards{
    display:grid;
    gap:15px;
}

.stat{
    padding:20px;
    border-radius:16px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);

    transition:.4s;
}

.stat:hover{
    transform:translateY(-5px);
}

.stat h3{
    color:white;
    margin-bottom:8px;
}

.stat p{
    margin:0;
    color:#94a3b8;
}

/* Right */

.form-area{
    padding:40px;
}

/* Tabs */

input[type=radio]{
    display:none;
}

.tabs{
    display:flex;
    background:#f8fafc;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:30px;
}

.tabs label{
    flex:1;
    text-align:center;
    padding:15px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

/* Active tabs */

#admin:checked ~ .tabs .admin{
    background:var(--admin);
    color:white;
}

#owner:checked ~ .tabs .owner{
    background:var(--owner);
    color:white;
}

#user:checked ~ .tabs .user{
    background:var(--user);
    color:white;
}

/* Forms */

.forms{
    position:relative;
    min-height:330px;
}

.form-box{
    position:absolute;
    width:100%;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.4s;
}

#admin:checked ~ .forms .admin-form,
#owner:checked ~ .forms .owner-form,
#user:checked ~ .forms .user-form{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.form-title{
    font-size:24px;
    margin-bottom:25px;
}

.group{
    margin-bottom:20px;
}

.group input{
    width:100%;
    padding:15px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    outline:none;
    transition:.3s;
}

.group input:focus{
    border-color:#6366f1;
}

.btn{
    width:100%;
    border:none;
    padding:15px;
    border-radius:12px;
    color:white;
    font-size:16px;
    cursor:pointer;
}

.admin-btn{
    background:linear-gradient(135deg,#ef4444,#f97316);
}

.owner-btn{
    background:linear-gradient(135deg,#8b5cf6,#6366f1);
}

.user-btn{
    background:linear-gradient(135deg,#06b6d4,#0891b2);
}

.btn:hover{
    opacity:.9;
}

.extra{
    margin-top:15px;
    text-align:center;
}

.extra a{
    text-decoration:none;
    color:#6366f1;
}

/* Mobile */

@media(max-width:900px){

.login-wrapper{
    grid-template-columns:1fr;
}

.preview{
    display:none;
}

}

</style>
</head>
<body>

<div class="bg-circle c1"></div>
<div class="bg-circle c2"></div>

<div class="login-wrapper">

    <div class="preview">

        <h1>Business Portal</h1>

        <p>
            Access your dashboard securely and manage
            everything from one place.
        </p>

        <div class="stat-cards">

            <div class="stat">
                <h3>15,000+</h3>
                <p>Registered Users</p>
            </div>

            <div class="stat">
                <h3>4,200+</h3>
                <p>Business Listings</p>
            </div>

            <div class="stat">
                <h3>99.9%</h3>
                <p>System Uptime</p>
            </div>

        </div>

    </div>

    <div class="form-area">

        <input checked type="radio" name="role" id="admin">
        <input type="radio" name="role" id="owner">
        <input type="radio" name="role" id="user">

        <div class="tabs">
            <label class="admin" for="admin">Admin</label>
            <label class="owner" for="owner">Business</label>
            <label class="user" for="user">User</label>
        </div>

        <div class="forms">

            <!-- Admin -->

            <div class="form-box admin-form">

                <h2 class="form-title">
                    Admin Login
                </h2>

                <div class="group">
                    <input type="text" placeholder="Admin ID">
                </div>

                <div class="group">
                    <input type="password" placeholder="Password">
                </div>

                <button class="btn admin-btn">
                    Login as Admin
                </button>

            </div>

            <!-- Business -->

            <div class="form-box owner-form">

                <h2 class="form-title">
                    Business Owner Login
                </h2>

                <div class="group">
                    <input type="email" placeholder="Business Email">
                </div>

                <div class="group">
                    <input type="password" placeholder="Password">
                </div>

                <button class="btn owner-btn">
                    Login as Business Owner
                </button>

            </div>

            <!-- User -->

            <div class="form-box user-form">

                <h2 class="form-title">
                    User Login
                </h2>

                <div class="group">
                    <input type="email" placeholder="Email Address">
                </div>

                <div class="group">
                    <input type="password" placeholder="Password">
                </div>

                <button class="btn user-btn">
                    Login as User
                </button>

            </div>

        </div>

        <div class="extra">
            <a href="#">Forgot Password?</a>
        </div>

    </div>

</div>

</body>
</html>
Live Preview HTML preview
Raw Code • 440 lines
Download 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Multi Role Login</title>

<style>

:root{
    --dark:#0f172a;
    --card:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.15);
    --admin:#ef4444;
    --owner:#8b5cf6;
    --user:#06b6d4;
}

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

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

    background:
    linear-gradient(
    135deg,
    #020617,
    #172554,
    #312e81,
    #0f172a
    );
}

/* Background */

.bg-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.5;
    animation:move 12s infinite ease-in-out;
}

.c1{
    width:350px;
    height:350px;
    background:#8b5cf6;
    top:-100px;
    left:-100px;
}

.c2{
    width:300px;
    height:300px;
    background:#06b6d4;
    right:-80px;
    bottom:-80px;
}

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

/* Main Card */

.login-wrapper{

    width:100%;
    max-width:950px;

    display:grid;
    grid-template-columns:1fr 1fr;

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.4);

    animation:appear .8s ease;
}

@keyframes appear{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Left */

.preview{

    padding:50px;

    color:white;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
    );
}

.preview h1{
    font-size:2rem;
    margin-bottom:15px;
}

.preview p{
    color:#cbd5e1;
    margin-bottom:30px;
}

.stat-cards{
    display:grid;
    gap:15px;
}

.stat{
    padding:20px;
    border-radius:16px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);

    transition:.4s;
}

.stat:hover{
    transform:translateY(-5px);
}

.stat h3{
    color:white;
    margin-bottom:8px;
}

.stat p{
    margin:0;
    color:#94a3b8;
}

/* Right */

.form-area{
    padding:40px;
}

/* Tabs */

input[type=radio]{
    display:none;
}

.tabs{
    display:flex;
    background:#f8fafc;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:30px;
}

.tabs label{
    flex:1;
    text-align:center;
    padding:15px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

/* Active tabs */

#admin:checked ~ .tabs .admin{
    background:var(--admin);
    color:white;
}

#owner:checked ~ .tabs .owner{
    background:var(--owner);
    color:white;
}

#user:checked ~ .tabs .user{
    background:var(--user);
    color:white;
}

/* Forms */

.forms{
    position:relative;
    min-height:330px;
}

.form-box{
    position:absolute;
    width:100%;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.4s;
}

#admin:checked ~ .forms .admin-form,
#owner:checked ~ .forms .owner-form,
#user:checked ~ .forms .user-form{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.form-title{
    font-size:24px;
    margin-bottom:25px;
}

.group{
    margin-bottom:20px;
}

.group input{
    width:100%;
    padding:15px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    outline:none;
    transition:.3s;
}

.group input:focus{
    border-color:#6366f1;
}

.btn{
    width:100%;
    border:none;
    padding:15px;
    border-radius:12px;
    color:white;
    font-size:16px;
    cursor:pointer;
}

.admin-btn{
    background:linear-gradient(135deg,#ef4444,#f97316);
}

.owner-btn{
    background:linear-gradient(135deg,#8b5cf6,#6366f1);
}

.user-btn{
    background:linear-gradient(135deg,#06b6d4,#0891b2);
}

.btn:hover{
    opacity:.9;
}

.extra{
    margin-top:15px;
    text-align:center;
}

.extra a{
    text-decoration:none;
    color:#6366f1;
}

/* Mobile */

@media(max-width:900px){

.login-wrapper{
    grid-template-columns:1fr;
}

.preview{
    display:none;
}

}

</style>
</head>
<body>

<div class="bg-circle c1"></div>
<div class="bg-circle c2"></div>

<div class="login-wrapper">

    <div class="preview">

        <h1>Business Portal</h1>

        <p>
            Access your dashboard securely and manage
            everything from one place.
        </p>

        <div class="stat-cards">

            <div class="stat">
                <h3>15,000+</h3>
                <p>Registered Users</p>
            </div>

            <div class="stat">
                <h3>4,200+</h3>
                <p>Business Listings</p>
            </div>

            <div class="stat">
                <h3>99.9%</h3>
                <p>System Uptime</p>
            </div>

        </div>

    </div>

    <div class="form-area">

        <input checked type="radio" name="role" id="admin">
        <input type="radio" name="role" id="owner">
        <input type="radio" name="role" id="user">

        <div class="tabs">
            <label class="admin" for="admin">Admin</label>
            <label class="owner" for="owner">Business</label>
            <label class="user" for="user">User</label>
        </div>

        <div class="forms">

            <!-- Admin -->

            <div class="form-box admin-form">

                <h2 class="form-title">
                    Admin Login
                </h2>

                <div class="group">
                    <input type="text" placeholder="Admin ID">
                </div>

                <div class="group">
                    <input type="password" placeholder="Password">
                </div>

                <button class="btn admin-btn">
                    Login as Admin
                </button>

            </div>

            <!-- Business -->

            <div class="form-box owner-form">

                <h2 class="form-title">
                    Business Owner Login
                </h2>

                <div class="group">
                    <input type="email" placeholder="Business Email">
                </div>

                <div class="group">
                    <input type="password" placeholder="Password">
                </div>

                <button class="btn owner-btn">
                    Login as Business Owner
                </button>

            </div>

            <!-- User -->

            <div class="form-box user-form">

                <h2 class="form-title">
                    User Login
                </h2>

                <div class="group">
                    <input type="email" placeholder="Email Address">
                </div>

                <div class="group">
                    <input type="password" placeholder="Password">
                </div>

                <button class="btn user-btn">
                    Login as User
                </button>

            </div>

        </div>

        <div class="extra">
            <a href="#">Forgot Password?</a>
        </div>

    </div>

</div>

</body>
</html>
Snippet from Abi/Dev August 04, 2026
Code copied to clipboard!