Glassmorphism login form UI using HTML CSS

A form is a UI interface or a section of any website where a visitor can input his or her information and submit it for verification. The information or data entered by any user will go to the website server and will be processed and then the user gets authorized. A form is usually used for collecting feedback, user registration, product purchase, etc. Today, in this beginner-friendly form design HTML CSS tutorial we will create a login form with a glassmorphism background behind it. We have also included font-awesome icons in the input boxes to make it look professional We've included a video tutorial below for you to check out.

Video Tutorial:

We hope you have watched the video tutorial about Glassmorphism Forms UI Design with HTML CSS. Many forms are available on the website. Some of these are contact forms, registration forms, login forms, search forms, survey or feedback forms, subscription forms, payment or checkout forms, order forms, comment forms, booking forms, etc. Today we will design a login form with HTML CSS. A login form is a form UI where users enter their username and password to gain access to a restricted website area. When they submit their credentials, whether they are correct or incorrect will be checked against the stored data to grant or deny access to the user. This login form UI is essential to protect the user account and personal information of a particular user.

Various websites use login forms to protect users' data. Some of them are social media websites like Facebook or Twitter, e-commerce websites like Amazon or eBay, banking websites, membership websites, etc. They use this login form UI to prevent unauthorized access to sensitive information. We used the latest trend Glassmorphism in this project to design the HTML CSS login form UI. It's a special UI design technique that helps create semi-transparent, frosted glass-like elements. It is becoming popular among developers for its aesthetic appeal.

You May Also Like:

Glassmorphism login form UI using HTML CSS [ Source Code ]:

To create this Glassmorphism login form UI with HTML CSS, you need to create an HTML and a CSS file. Link external CSS in HTML file. Add font-awesome CDN as we are using icons for input boxes. Next, copy the code from the code box below and paste it into your files and save. Check if the snippet is working properly in your browser. You can also download the source code from the download button below the blog post.

ADD HTML:

<!doctype html>
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8">  
    <title>Login Form in HTML & CSS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="form-area">
        <div class="wrapper">
            <h2>Login</h2>       
            <form>             
                <div class="box">
                    <input type="text" placeholder="Username">
                    <i class="fa fa-user"></i>
                </div>
                <div class="box">
                    <input type="password" placeholder="Password">
                    <i class="fa fa-lock"></i>
                </div>
                <div class="options">
                    <label><input type="checkbox"> Remember Me</label>
                    <a href="#">Forgot Password?</a>
                </div>
                <button type="submit">Submit</button>
            </form>
            <p>Don't have an account? <a href="#">Register</a></p>
        </div>
    </div>
    
    
    
</body>
</html>

ADD CSS:

* {
	box-sizing: border-box; 
}
body {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
	height: 100vh;
	width: 100%;
	background: linear-gradient(to bottom, black, transparent), url("1.jpg");
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.wrapper {
	width: 400px;
	height: auto;
	color: #fff;
	padding: 50px 30px;
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
	position: relative;
	background: #ffffff1a;
	border: 2px solid #ffffff30;
	box-shadow: 0 0 30px #0000002a;
	border-radius: 25px;
}
.wrapper h2 {
	text-align: center;
	margin: 0;
	margin-bottom: 30px;
}
.wrapper p {
	margin: 0;
	padding: 0;
	font-weight: 300;
	text-align: center;
}
.form-area {
	display: grid;
	place-items: center;
	height: 100vh;
}
.box {
	position: relative;
}
.box input {
	padding-right: 30px;
}
.box i {
	position: absolute;
	top: 34%;
	transform: translateY(-50%);
	right: 30px;
	color: #fff;
}
.wrapper input, button {
	border: none;
	border: 1px solid #bababa;
	background: transparent;
	outline: none;
	height: 50px;
	color: #ffffff;
	font-size: 16px;
	width: 100%;
	margin-bottom: 20px;
	padding: 15px;
	border-radius: 50px;
}
.wrapper .options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.wrapper .options label {
	color: #fff;
	font-size: 18px;
	line-height: 3.5;
}
.options input[type="checkbox"] {
	width: 15px;
	height: auto;
}
.wrapper a {
	text-decoration: none;
	color: #fff;
}
.wrapper button {
	background: #fff;
	color: #262626;
}

Login form is an essential element for any website. If we can add the design trend, glassmorphism, it will make the interface more attractive and modern. Together this will help create a secure, and aesthetically pleasing web experience for the user We hope you have collected the source code. If you want more snippets, you need to visit our website homepage and click on Load More button. Thank you for visiting our website. Happy coding.

DOWNLOAD CODE

Video Tutorial:

Glassmorphism login form UI using HTML CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Glassmorphism login form UI using HTML CSS

Video Tutorial:

Glassmorphism login form UI using HTML CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form