Animated Glassmorphism Login Form

Learn how to create an animated Glassmorphism Login Form using HTML and CSS.

Animated Glassmorphism Login Form

Animated Glassmorphism Login Form Using HTML & CSS

This Animated Glassmorphism Login Form is built using HTML and CSS to create a modern authentication interface with stunning glass-like visual effects. The design combines transparency, backdrop blur, shadows, and smooth animations to deliver a premium user experience that follows modern web design trends.

The project uses advanced CSS styling techniques to achieve the popular Glassmorphism effect seen in modern operating systems and applications. With responsive layouts, elegant animations, and a clean user interface, the login form works seamlessly across desktops, tablets, and mobile devices while maintaining a professional appearance.

Steps to Create an Animated Glassmorphism Login Form

Follow these simple steps to build a modern glass-effect login page:

Create a project folder, for example, animated-glassmorphism-login-form.
Inside the folder, create two files: index.html and style.css.
Design the login form structure using HTML.

                            
                                <!DOCTYPE html>

<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->

<html>
<head>
	<title>Glassmorphism Login Form</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet"> 

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div class="container">
  <form >
    <p>Welcome</p>
    <input type="email" placeholder="Enter Email" required=""><br>
    <input type="password" placeholder="Enter Password" required=""><br>
    <input type="submit" value="Sign in" /><br>
  </form>

  <div class="drops">
    <div class="drop drop-1"></div>
    <div class="drop drop-2"></div>
    <div class="drop drop-3"></div>
    <div class="drop drop-4"></div>
    <div class="drop drop-5"></div>
    <div class="drop drop-6"></div>
    <div class="drop drop-7"></div>
    <div class="drop drop-8"></div>
  </div>
</div>

</body>
</html>

Apply Glassmorphism effects using CSS transparency, backdrop filters, and shadows. Add CSS animations and transition effects to improve user interaction. Customize the layout to achieve a clean and professional design. Make the form fully responsive for desktops, tablets, and mobile devices. Save the files and open the project in a browser to view the final result.

                            
                                <style>
/*Login Form styling */
body {
background: linear-gradient(90deg, rgba(241,119,136,1) 18%, rgba(255,104,125,1) 41%, rgba(242,83,105,1) 65%, rgba(224,87,87,1) 87%);
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
}

.container {
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}

form {
height: 320px;
padding: 3em;
border-radius: 20px;
background: rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);
text-align: center;
}

p {
font-weight: bold;
color: #fff;
opacity: 0.7;
font-size: 2rem;
margin-top: 0;
margin-bottom: 60px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

input {
background: transparent;
width: 220px;
font-size: 0.9em;
color: #fff;
padding: 1em;
margin-bottom: 2em;
font-weight: 500;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 30px rgba(0,0,0,0.2);
}   

input[type="email"]:focus ,
input[type="password"]:focus {
 box-shadow: 2px 2px 40px 5px rgba(0,0,0,0.2);
 outline: none;
}     
input::placeholder {
color: #fff;
font-weight: 400;
}
input[type="submit"] {
margin-top: 10px;
width: 150px;
font-size: 1rem;
cursor: pointer;
}

.drop {
background: rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
border-radius: 10px;
border-left: 1px solid rgba(255,255,255,0.3);
border-top: 1px solid rgba(255,255,255,0.3);
box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.2);
position: absolute;
}
.drop-1 {
height: 70px;
width: 70px;
top: -15px;
left: -35px;
}

.drop-2 {
height: 80px;
width: 80px;
bottom: -30px;
right: -30px;
z-index: -1;
}

.drop-3 {
height: 100px;
width: 100px;
bottom: 130px;
right: -65px;
z-index: -1;
}

.drop-4 {
height: 120px;
width: 120px;
top: -60px;
right: -70px;
}

.drop-5 {
height: 80px;
width: 80px;
bottom: 310px;
left: -240px;
z-index: -1;
}
.drop-6 {
height: 80px;
width: 80px;
bottom: 180px;
left: -60px;
}
.drop-7 {
height: 150px;
width: 150px;
bottom: 50px;
left: -300px;

}
.drop-8 {
height: 130px;
width: 130px;
bottom: 200px;
left: 530px;

}
</style>

Download Code Files