Animated Login Form HTML CSS

Open In Editor 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>Futuristic AI Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #111;
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #fff;
     	    overfolow:hidden;
        }

.login-container {
            width: 350px;
            padding: 30px;
            border-radius: 15px;
            background: black;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
            backdrop-filter: blur(10px);
      
        }

h1 {
            font-size: 30px;
            margin-bottom: 20px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: white;
        }

.input-field {
            margin-bottom: 20px;
            position: relative;
        }

.input-field input {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: black;
            font-size: 16px;
            outline: none;
            box-sizing: border-box;
            transition: all 0.3s ease-in-out;
        }

.input-field input:focus {
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid #6a3edc;
        }

.login-btn {
            width: 100%;
            padding: 12px;
            background: #6a3edc;
            color: black;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.login-btn:hover {
            background: #3b4cca;
            transform: scale(1.05);
        }

.forgot-password {
            margin-top: 10px;
            font-size: 14px;
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.forgot-password:hover {
            color: #fff;
        }

.background-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.6));
            z-index: -1;
            animation: pulse 3s infinite;
        }

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.0);
            }
            100% {
                transform: scale(1);
            }
        }

.animate-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 15px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            animation: border-animation 3s infinite;
        }

@keyframes border-animation {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>

<div class="login-container">
    <div class="animate-border"></div>
    <h1>Login</h1>
    <div class="input-field">
        <input type="text" id="username" placeholder="Username" required>
    </div>
    <div class="input-field">
        <input type="password" id="password" placeholder="Password" required>
    </div>
    <button class="login-btn" onclick="login()">Log In</button>
    <a href="#" class="forgot-password">Forgot password?</a>
</div>

if (username === "" || password === "") {
            alert("Please fill out both fields.");
        } else {
            alert("Login Successful!");
        }
    }
</script>

</body>
</html>

Animated Login Form HTML CSS

Recommended

simple and descent registration form

Glass login

Animated HTML and CSS Input

HTML

CSS

JS

Recommended

simple and descent registration form

Glass login

Animated HTML and CSS Input

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS