Glassy Login & Register Panel V2 from TheDoc

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login & Register Panel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="login-panel" class="panel active">
            <h2>Login</h2>
            <form>
                <input type="text" placeholder="Username" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Login</button>
            </form>
            <p>No account yet? <a href="#" id="show-register">Register</a></p>
        </div>
        <div id="register-panel" class="panel">
            <h2>Register</h2>
            <form>
                <input type="text" placeholder="Username" required>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Register</button>
            </form>
            <p>Already have an account? <a href="#" id="show-login">Login</a></p>
        </div>
    </div>
    <script src="script.js"></script>
    <div class="hidden-doc">TheDoc</div>
</body>
</html>

CSS

body {
    min-height: 100vh;
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.panel {
    background: rgba(34, 40, 49, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 2rem 2.5rem;
    min-width: 320px;
    margin: 1rem 0;
    display: none;
}

.panel.active {
    display: block;
}

h2 {
    color: #ff3b3f; /* red */
    margin-bottom: 1.5rem;
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input {
    padding: 0.75rem;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 1rem;
    outline: none;
}

input::placeholder {
    color: #bdbdbd;
}

button {
    padding: 0.75rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(90deg, #ff3b3f 0%, #232526 100%);
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background: linear-gradient(90deg, #232526 0%, #ff3b3f 100%);
}

p {
    color: #bdbdbd;
    text-align: center;
    margin-top: 1rem;
}

a {
    color: #ff3b3f;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

.hidden-doc {
    display: none;
}

Glassy Login & Register Panel V2 from TheDoc

Recommended

Turkish Login Form HTML

HTML CSS Login Page with Fingerprint Design

HTML CSS Login Form Template

HTML

CSS

JS

Recommended

Turkish Login Form HTML

HTML CSS Login Page with Fingerprint Design

HTML CSS Login Form Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS