Formulario de inicio de sesión de Liquid Glass HTML CSS

572 thedashboard1

Abrir en el editor Video Publica tu código

Formulario de inicio de sesión de Liquid Glass HTML CSS

Recomendado

28 October 2025

Ejemplo de control deslizante de blog de Swiper

19 March 2025

Luces de estudio

2 February 2026

Script de control de cursor y gamepad móvil

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>

Recomendado

Ejemplo de control deslizante de blog de Swiper

Luces de estudio

Script de control de cursor y gamepad móvil

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS