Modern Login Form In HTML & CSS
This modern login form is built with HTML and CSS, offering a clean and responsive design Using CSS Flex Box . It includes username and password fields, a Login Now button, and social login options for Google and Facebook. The layout is mobile-friendly and designed to deliver a smooth user experience. Perfect for any website or app login page, this form enhances both UI design and functionality.
In this post, we are showcasing a modern, responsive login form built entirely with HTML and CSS. This login form features a clean and professional design that can be used on any website login page, whether it’s a business site, personal blog, admin dashboard, or a mobile app. The form includes all the essential elements such as email and password input fields, a prominent login button, and convenient social login options like Google login and Facebook login. These features are designed to enhance the user experience by making the login process smooth and accessible.
Integrating Google and Facebook login options is a great way to allow users to sign in quickly without having to create a new account, which improves conversion rates and user retention.
More Login and Registration Page
This post also provides the full source code so you can copy, edit, and use it in your own project. Feel free to experiment with the design, colors, fonts, or layout to match your website’s branding. A great-looking login form is a small detail that can make a big difference in your site’s professional look and user trust.
Here The Steps to Create Modern Login Form:
1. Set up your HTML structure
Start by creating a basic HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Login</title>
<!-- Link CSS -->
<link rel="stylesheet" href="style.css">
<!-- Remix Icon CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css">
</head>
<body>
<div class="login-wrapper">
<div class="login-content">
<h3>LOGIN</h3>
<p>Get Start With login Lorem ipsum dolor sit amet.</p>
<form>
<div class="input-wrapper">
<i class="ri-user-line"></i>
<input type="text" placeholder="Username">
</div>
<div class="input-wrapper">
<i class="ri-lock-line"></i>
<input type="password" placeholder="Password">
</div>
<button>Login Now</button>
</form>
<p> <b>Login</b> With Others </p>
<div class="login-btn">
<img decoding="async" src="Assets/google.jpg" alt="google-logo" height="30">
<span>Login With <b>Google</b></span>
</div>
<div class="login-btn">
<img decoding="async" src="Assets/facebook-logo.png" alt="facebook-logo" height="25">
<span>Login With <b>Facebook</b></span>
</div>
</div>
<div class="login-image">
<img decoding="async" src="Assets/bg-lines.png" alt="bg-lines" id="background-lines">
<div class="hero-image">
<img decoding="async" src="Assets/hero-image.png" alt="hero-image">
</div>
</div>
</div>
</body>
</html>
2. Add CSS for styling
Style the form with CSS for a clean, modern look:
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'roboto';
}
body {
background-color: #E7E2FF;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.login-wrapper {
width: 100%;
height: 600px;
background-color: #fff;
border-radius: 20px;
max-width: 1100px;
display: flex;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
position: relative;
}
.login-wrapper::after ,
.login-wrapper::before {
position: absolute;
content: '';
height: 60px;
width: 60px;
border-radius: 50%;
}
.login-wrapper::after {
background: linear-gradient(270deg , #6F5BF0 , #9d89fd);;
top: -20px;
left: -20px;
z-index: -1;
animation: zoom 0.5s 0.5s infinite linear alternate;
}
.login-wrapper::before {
background: #fff;
bottom: -20px;
right: -20px;
z-index: -1;
animation: zoom 0.5s infinite linear alternate;
}
@keyframes zoom {
0%{transform: scale(1);}
100%{transform: scale(1.2);}
}
.login-content {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
padding: 0 8%;
}
.login-content h3{
font-weight: 900;
font-size: 28px;
}
.login-content p{
font-weight: 400;
font-size: 14px;
color: #2c2c2c;
}
.login-content form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 20px auto;
}
.login-content form .input-wrapper{
height: 40px;
width: 100%;
position: relative;
background-color: #F3F1FF;
border-radius: 15px;
}
.login-content form .input-wrapper i{
position: absolute;
top: 10px;
left: 10px;
}
.login-content form .input-wrapper input{
height: 100%;
width: 100%;
border: none;
outline: none;
background-color: transparent;
color: #1e1e1e;
padding-left: 35px;
border-radius: 5px;
}
.input-wrapper input::placeholder{
color: #1e1e1e;
}
.login-content form button {
height: 45px;
width: 150px;
border-radius: 15px;
border: none;
background: linear-gradient(270deg , #6F5BF0 , #9d89fd);
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
cursor: pointer;
margin: 10px 0;
}
.login-content p:nth-of-type(2) {
position: relative;
font-size: 16px;
}
.login-content p:nth-of-type(2):after ,
.login-content p:nth-of-type(2):before {
position: absolute;
content: '';
top: 50%;
height: 1px;
width: 90%;
background-color: rgba(0, 0, 0, 0.05);
}
.login-content p:nth-of-type(2):after {
left: -100%;
}
.login-content p:nth-of-type(2):before {
left: 100%;
}
.login-btn {
height: 45px;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 15px;
cursor: pointer;
}
.login-image {
width: 50%;
height: 100%;
background-color: #6F5BF0;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
#background-lines {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
opacity: 0.2;
z-index: -1;
}
.hero-image {
height: 380px;
width: 300px;
display: flex;
align-items: end;
justify-content: end;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 30px;
backdrop-filter: blur(5px);
position: relative;
}
.hero-image img{
position: absolute;
bottom: 0;
right: -80px;
height: 360px;
width: 350px;
}
3. Add Media Queries
Add Media Queries for Mobile View .
@media screen and (max-width:1400px) {
.login-wrapper {
height: 500px;
max-width: 900px;
}
}
@media screen and (max-width:900px) {
.login-wrapper {
width: 100%;
max-width: 450px;
}
.login-wrapper .login-image {
display: none;
}
.login-wrapper .login-content {
width: 100%;
}
}
Watch More Tutorial
HTML CSS login form
login form with icons
modern login form
responsive login form mobile friendly login form
simple login form Design
