Glassmorphism Login Form Using HTML & CSS

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

Glassmorphism Login Form Using HTML & CSS

This Glassmorphism Login Form is built using HTML and CSS to create a modern authentication interface with a stylish glass-effect design. The form features a transparent background, blur effects, and elegant UI elements that provide a professional and visually appealing user experience.

The project uses advanced CSS properties, animations, and responsive design techniques to create a smooth and interactive login page. The glassmorphism effect gives the form a modern look while maintaining readability and usability across desktops, tablets, and mobile devices.

Steps to Create a Glassmorphism Login Form

Follow these simple steps to build an animated glassmorphism login page:

Create a project folder, for example, 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 rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   

   <div class="main">
   	<div class="header">
   		<h2>LOGIN FORM</h2>
   		 <p>Contact us and get more info</p>
   	</div>
      
      <div class="contactus">
   		<form>
   		<input type="Email" placeholder="Enter Email" required="">
   		<input type="Password" placeholder="Enter Password" required="">
   		<center><button>Submit</button></center>
   	    </form>

   	</div>

   </div>

</body>
</html>

Apply Glassmorphism effects using CSS properties such as transparency, blur, and shadows. Add input fields, buttons, and authentication form elements. Implement CSS animations and hover effects to improve user interaction. Create a modern sign-in interface with a clean and professional appearance. Make the design fully responsive for desktops, tablets, and mobile devices. Save the files and open the project in a browser to test the final login form.

                            
                                <style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');


	body{
		background-image: url(pic1.jpg);
		background-position: center;
		background-size: cover;
 		display: flex;
 		flex-wrap: wrap;
 		min-height: 90vh;
 		justify-content: center;
 		align-content: center;
 		font-family: 'Lato', sans-serif;
	}
	.main{
		width: 330px;
        height: 400px;
		border: 1px solid #000;
		padding: 30px;
        background: rgba( 255, 255, 255, 0.25 );
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 3.5px );
        border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
	}
	.header{
		text-align: center;
	}
	.header h2{
	   color: #000;
		font-size: 3rem;
		font-weight: bold;
	}
	.header p{
		font-size: 22px;
	}
	input{
		display: block;
		height: 30px;
		width: 100%;
		margin-top: 40px;
		border: none;
		background: transparent;
		border-bottom: 2px solid #000;
		font-size: 16px;
	}
	input:focus{
      outline: none;
	}
	input::placeholder{
		color: #000;
		font-size: 16px;
	}
	button{
		height: 40px;
		width: 200px;
		margin-top: 50px;
		border-radius: 30px;
		cursor: pointer;
		background-color: #3287fc;
		font-weight: bold;
		font-size: 16px;
		color: white;
		border:none;
		transition: all .5s ease-in-out; 
	}
	button:hover{
		background-color: #3287cc;
	}
</style>

Download Code Files