Bring your login page to life with this stunning Animated Glassmorphism Login Form. It features a smooth frosted glass effect, a parallax background, animated falling leaves, and a walking character animation — all built with pure HTML & CSS.
This design is fully responsive, lightweight, and easy to customize for your own projects. Whether you’re creating a personal website or a professional web app, this login form will give your UI a modern and engaging feel.
Features:
Glassmorphism (frosted glass) UI style
Animated falling leaves background
Smooth walking character animation
Pure HTML & CSS (no JavaScript required)
Easy to customize colors, fonts, and images Get Code
HTML Code
The HTML structure contains all the elements needed for the background images, animations, and login form. It includes sections for the animated leaves, parallax layers, and the form fields for username, password, and login actions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Glassmorphism Login Page | @codingstella</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<img src="leaf_01.png">
<img src="leaf_02.png">
<img src="leaf_03.png">
<img src="leaf_04.png">
<img src="leaf_01.png">
<img src="leaf_02.png">
<img src="leaf_03.png">
<img src="leaf_04.png">
<img src="bg.jpg">
<img src="girl.png">
<img src="trees.png">
<h2>Sign In</h2>
<input type="text" placeholder="Username"
<input type="password" placeholder="Password"
<input type="submit" value="Login" id="btn">
<a href="#">Forget Password</a>
<a href="#">Signup</a>
</section>
</body>
</html>
CSS Code
The CSS handles the glassmorphism effect, background animations, and the walking character movement. It also styles the login form, input fields, buttons, and links for a clean, professional look.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
section .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section .trees {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 100;
pointer-events: none;
}
section .girl {
position: absolute;
scale: 0.65;
pointer-events: none;
animation: animateGirl 10s linear infinite;
}
@keyframes animateGirl {
0% {
transform: translateX(calc(100% + 100vw));
}
50% {
transform: translateX(calc(-100% - 100vw));
}
50.01% {
transform: translateX(calc(-100% - 100vw)) rotateY(180deg);
}
100% {
transform: translateX(calc(100% + 100vw)) rotateY(180deg);
}
}
.login {
position: relative;
padding: 60px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
border: 1px solid #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
width: 500px;
display: flex;
flex-direction: column;
gap: 30px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}
.login h2 {
position: relative;
width: 100%;
text-align: center;
font-size: 2.5em;
font-weight: 600;
color: #8f2c24;
margin-bottom: 10px;
}
.login .inputBox {
position: relative;
}
.login .inputBox input {
position: relative;
width: 100%;
padding: 15px 20px;
outline: none;
font-size: 1.25em;
color: #8f2c24;
border-radius: 5px;
background: #fff;
border: none;
margin-bottom: 30px;
}
.login .inputBox ::placeholder {
color: #8f2c24;
}
.login .inputBox #btn {
position: relative;
border: none;
outline: none;
background: #8f2c24;
color: #fff;
cursor: pointer;
font-size: 1.25em;
font-weight: 500;
transition: 0.5s;
}
.login .inputBox #btn:hover {
background: #d64c42;
}
.login .group {
display: flex;
justify-content: space-between;
}
.login .group a {
font-size: 1.25em;
color: #8f2c24;
font-weight: 500;
text-decoration: none;
}
.login .group a:nth-child(2) {
text-decoration: underline;
}
.leaves {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
pointer-events: none;
}
.leaves .set {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.leaves .set div {
position: absolute;
display: block;
}
.leaves .set div:nth-child(1) {
left: 20%;
animation: animate 20s linear infinite;
}
.leaves .set div:nth-child(2) {
left: 50%;
animation: animate 14s linear infinite;
}
.leaves .set div:nth-child(3) {
left: 70%;
animation: animate 12s linear infinite;
}
.leaves .set div:nth-child(4) {
left: 5%;
animation: animate 15s linear infinite;
}
.leaves .set div:nth-child(5) {
left: 85%;
animation: animate 18s linear infinite;
}
.leaves .set div:nth-child(6) {
left: 90%;
animation: animate 12s linear infinite;
}
.leaves .set div:nth-child(7) {
left: 15%;
animation: animate 14s linear infinite;
}
.leaves .set div:nth-child(8) {
left: 60%;
animation: animate 15s linear infinite;
}
@keyframes animate {
0% {
opacity: 0;
top: -10%;
transform: translateX(20px) rotate(0deg);
}
10% {
opacity: 1;
}
20% {
transform: translateX(-20px) rotate(45deg);
}
40% {
transform: translateX(-20px) rotate(90deg);
}
60% {
transform: translateX(20px) rotate(180deg);
}
80% {
transform: translateX(-20px) rotate(45deg);
}
100% {
top: 110%;
transform: translateX(20px) rotate(225deg);
}
}
Download Full Project with Assets
Download the complete project in a ZIP file, including all HTML, CSS, and image assets (bg.jpg, girl.png, trees.png, and leaves images). Everything is ready to use — just extract and open the HTML file in your browser.
DOWNLOAD ZIP FILE
