CSS Animated Login Form with Liquid Background

Open In Editor Video Publish Your Code

/* Login Card */
        .login-container {
            position: relative;
            width: 400px;
            max-width: 90%;
            padding: 40px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
            animation: fadeIn 1s ease-out;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

.login-container h2 {
            color: #fff;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

.input-group {
            position: relative;
            margin-bottom: 30px;
        }

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

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

.input-group input:focus ~ label,
        .input-group input:valid ~ label {
            top: -20px;
            font-size: 12px;
            color: #00dfd8;
        }

.input-group input:focus {
            border-bottom: 2px solid #00dfd8;
        }

.login-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(45deg, #ff0080, #7928ca);
            border: none;
            border-radius: 50px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 10px 20px rgba(255, 0, 128, 0.3);
        }

.login-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 25px rgba(255, 0, 128, 0.5);
        }

.login-btn:active {
            transform: scale(0.98);
        }

.options {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

.options a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            font-size: 13px;
            transition: 0.3s;
        }

.options a:hover {
            color: #fff;
        }

/* Unusual Shape Animation */
        .login-container::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(45deg, #ff0080, #00dfd8);
            border-radius: 25px;
            opacity: 0;
            transition: 0.5s;
        }

.login-container:hover::before {
            opacity: 0.3;
            filter: blur(10px);
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <form action="#">
            <div class="input-group">
                <input type="text" required>
                <label>Username</label>
            </div>
            <div class="input-group">
                <input type="password" required>
                <label>Password</label>
            </div>
            <button type="submit" class="login-btn">Sign In</button>
            <div class="options">
                <a href="#">Forgot Password?</a>
                <a href="#">Create Account</a>
            </div>
        </form>
    </div>

document.addEventListener('mouseenter', () => {
            card.style.transition = 'none';
        });

document.addEventListener('mouseleave', () => {
            card.style.transition = 'all 0.5s ease';
            card.style.transform = `rotateY(0deg) rotateX(0deg)`;
        });
    </script>
</body>
</html>

CSS Animated Login Form with Liquid Background

Recommended

3D CSS Photo Frame Effect to Images

Pure CSS3 Star Wars Lightsaber Checkboxes

Neon Login Form

HTML

CSS

JS

Recommended

3D CSS Photo Frame Effect to Images

Pure CSS3 Star Wars Lightsaber Checkboxes

Neon Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS