Stylish HTML CSS Login Form with Background Image

Follow this step-by-step guide to effortlessly create a stunning login form with a captivating background image using HTML and CSS. Elevate your website’s visual appeal and user experience, combining modern design elements for a sleek and professional login interface. Let’s dive into the world of style and functionality with our ‘Login Form with Background Image’ tutorial.

Step 1: Adding Font

Before diving into the design, make sure you have the to enhance the visual appeal of your login form. To do this, add the following link to the <head> section of your HTML file. This ensures a sleek and modern typography that complements your design:

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

Step 2: Designing the Login Form in HTML

Inside our container, we’ll create the actual form. This includes input fields for the username and password, a convenient ‘Keep me Signed in’ checkbox, and a ‘Sign In’ button.

<div class="login">
<h2 class="active"> sign in </h2>
<h2 class="nonactive"> sign up </h2>
<form>
<input type="text" class="text" name="username">
<span>username</span>
<input type="password" class="text" name="password">
<span>password</span>
<input type="checkbox" id="checkbox-1-1" class="custom-checkbox" />
<label for="checkbox-1-1">Keep me Signed in</label>
<button class="signin">
Sign In
</button>
<hr>
<a href="#">Forgot Password?</a>
</form>
</div>

Step 3: Infuse Stylish Design with CSS Magic

Now, let’s breathe life into your login form by copying and pasting the provided CSS code into your stylesheet. This carefully crafted code not only styles the form elements but also dynamically sets the background image, ensuring a modern and visually appealing design.

body,
.signin {
background-color: #d3d3d3;
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: 14px;
letter-spacing: 1px;
}
.cd__main{
min-height: 720px;
position: relative;
}
.login {
position: relative;
height: 560px;
width: 405px;
margin: auto;
padding: 60px 60px;
background: #625a5a no-repeat center center;
background-size: cover;
box-shadow: 0px 30px 60px -5px #000;
}

form {
padding-top: 80px;
}

.active {
border-bottom: 2px solid #1161ed;
}

.nonactive {
color: rgba(255, 255, 255, 0.2);
}

h2 {
padding-left: 12px;
font-size: 22px;
text-transform: uppercase;
padding-bottom: 5px;
letter-spacing: 2px;
display: inline-block;
font-weight: 100;
}

h2:first-child {
padding-left: 0px;
}

span {
text-transform: uppercase;
font-size: 12px;
opacity: 0.4;
display: inline-block;
position: relative;
top: -65px;
transition: all 0.5s ease-in-out;
}

.text {
border: none;
width: 89%;
padding: 10px 20px;
display: block;
height: 15px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0);
overflow: hidden;
margin-top: 15px;
transition: all 0.5s ease-in-out;
}

.text:focus {
outline: 0;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
background: rgba(0, 0, 0, 0);
}

.text:focus + span {
opacity: 0.6;
}

input[type="text"],
input[type="password"] {
font-family: 'Montserrat', sans-serif;
color: #fff;
}

input {
display: inline-block;
padding-top: 20px;
font-size: 14px;
}

h2,
span,
.custom-checkbox {
margin-left: 20px;
}

.custom-checkbox {
-webkit-appearance: none;
background-color: rgba(255, 255, 255, 0.1);
padding: 8px;
border-radius: 2px;
display: inline-block;
position: relative;
top: 6px;
}
.custom-checkbox:checked {
background-color: rgba(17, 97, 237, 1);
}
.custom-checkbox:checked:after {
content: '\2714';
font-size: 10px;
position: absolute;
top: 1px;
left: 4px;
color: #fff;
}

.custom-checkbox:focus {
outline: none;
}

label {
display: inline-block;
padding-top: 10px;
padding-left: 5px;
}
.signin {
background-color: #1161ed;
color: #FFF;
width: 100%;
padding: 10px 20px;
display: block;
height: 39px;
border-radius: 20px;
margin-top: 30px;
transition: all 0.5s ease-in-out;
border: none;
text-transform: uppercase;
}

.signin:hover {
background: #4082f5;
box-shadow: 0px 4px 35px -5px #4082f5;
cursor: pointer;
}
.signin:focus {
outline: none;
}

hr {
border: 1px solid rgba(255, 255, 255, 0.1);
top: 85px;
position: relative;
}

.login a {
text-align: center;
display: block;
top: 120px;
position: relative;
text-decoration: none;
color: rgba(255, 255, 255, 0.2);
}