Webleb - UI Elements - Glassy Login & Register Panel from TheDoc

HTML

<!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: #21e675;
    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.15);
    color: #fff;
    font-size: 1rem;
    outline: none;
}

input::placeholder {
    color: #bdbdbd;
}

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

button:hover {
    background: linear-gradient(90deg, #1b5e20 0%, #21e675 100%);
}

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

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

a:hover {
    text-decoration: underline;
}

.hidden-doc {
    display: none;
}

Glassy Login & Register Panel from TheDoc

Recommended

CSS Login Form

Led login form

3D Login Signup Box HTML CSS

HTML

CSS

JS

Recommended

CSS Login Form

Led login form

3D Login Signup Box HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS