लिक्विड ग्लास लॉगिन फ़ॉर्म HTML CSS

396 thedashboard1

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

20 April 2024

HTML और CSS का उपयोग करके सोशल आइकन

23 August 2025

लॉगिन और पंजीकरण फ़ॉर्म HTML CSS टेम्पलेट

16 October 2025

लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

HTML

<!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>

अनुशंसित

HTML और CSS का उपयोग करके सोशल आइकन

लॉगिन और पंजीकरण फ़ॉर्म HTML CSS टेम्पलेट

लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS