Liquid Glass Login Form HTML CSS

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Glass Login</title>
    <style>
        /* Global Reset and Body Setup */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /* Creating a vibrant, liquid-like background for the glass effect to work against */
            background: linear-gradient(135deg, #00c6ff, #0072ff, #2934ff, #8800ff);
            background-size: 400% 400%;
            animation: gradient-shift 15s ease infinite;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #fff;
        }

@keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* The Liquid Glass Container */
        .glass-login-form {
            width: 380px;
            padding: 40px;
            border-radius: 20px;
            /* Key Glass Effects */
            background: rgba(255, 255, 255, 0.15); /* Light transparency */
            backdrop-filter: blur(15px); /* The main glass effect */
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); /* Deep shadow */
            transition: transform 0.3s ease;
        }

.glass-login-form:hover {
            transform: scale(1.02);
        }

h2 {
            text-align: center;
            margin-bottom: 30px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

/* Input Styling */
        .input-group {
            position: relative;
            margin-bottom: 30px;
        }

.input-group input {
            width: 100%;
            padding: 10px 0;
            font-size: 1em;
            color: #fff;
            border: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.5);
            outline: none;
            background: transparent;
            transition: border-bottom 0.3s;
        }

.input-group input:focus,
        .input-group input:valid {
            border-bottom: 2px solid #fff;
        }

.input-group label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px 0;
            font-size: 1em;
            color: rgba(255, 255, 255, 0.7);
            pointer-events: none;
            transition: 0.5s;
        }

.input-group input:focus ~ label,
        .input-group input:valid ~ label {
            top: -20px;
            left: 0;
            color: #fff;
            font-size: 0.8em;
        }

/* Button Styling */
        .login-button {
            display: block;
            width: 100%;
            padding: 10px;
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            color: #fff;
            font-size: 1.1em;
            cursor: pointer;
            transition: background 0.3s, box-shadow 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.login-button:hover {
            background: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>

<form class="glass-login-form" onsubmit="return false;">
        <h2>Liquid Login</h2>

<div class="input-group">
            <input type="email" required>
            <label>Email Address</label>
        </div>

<div class="input-group">
            <input type="password" required>
            <label>Password</label>
        </div>

</body>
</html>

Liquid Glass Login Form HTML CSS

Recommended

Liquid Drop Login Page HTML Template

CSS Animated Background with Loading Effect

form by

HTML

CSS

JS

Recommended

Liquid Drop Login Page HTML Template

CSS Animated Background with Loading Effect

form by

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS