Simple Transparent Login Form using HTML CSS

If you want to create a transparent login form using HTML and CSS then you have come to the right place. Here I will show you how to create a CSS transparent login page. We all use the login form to access the accounts of different websites.

The transparent login form is a simple login page but in this case, the background can be seen completely. That is, the background image and color can be seen clearly. The login form of this type of transfer is much more modern and beautiful than the normal login form. Here you will learn how to create a nice transparent login page using HTML and CSS.

Transparent Login Form HTML CSS

I used HTML CSS to create this login form and used a nice background image. First I did some design on top of the webpage and added the background image to the webpage. Then I created the login form. Here I have used shadow to understand the area of ​​the form. 

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.

A heading or title is used first in the Transparent login form. Then there are three places to input. The first input box contains the username, the second input box contains the email address, and the third box contains the password input. Each input box has an icon and some color effects.

✅👉Related Post: 20 Best Transparent Login Form

A button has been used at the end of all that allows you to log in. If you know the basics of HTML and CSS then you can easily create this CSS transparent login form.

Step 1: Basic structure of Transparent Login Form

I designed the webpage using the HTML and CSS codes below and created a basic structure of the login form. As I said before, an area has been created which will contain all the information.

<div class="wrapper">

 <div class="loginform">

 </div>

</div>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Open Sans', sans-serif;

}

.wrapper{

width: 100%;

height: 100vh;

background: url("background.jpg") no-repeat top center;

background-size: cover;

}

.loginform{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

max-width: 380px;

width: 100%;

height: auto;

border-radius: 5px;

padding: 40px 30px 40px 0;

box-shadow: -4px -4px 11px #c8c2c2a2,

            4px 4px 9px rgba(147, 149, 151, 0.871);

}

Step 2: Add a title

Now I have created a title in the login form and designed it with the help of CSS code. Font-size: 32px has been used to increase the size of the text.

<div class="title">

   Login form

</div>

.loginform .title{

font-size: 32px;

text-transform: uppercase;

font-weight: bold;

text-align: center;

color: #c9c3cd;

margin-bottom: 35px;

}

Step 3: Input box to input login information

Now it's time to create three input boxes. An icon is used with each input box. HTML's input function has been used to create the input box. I used light white as the background color.

<div class="input-form username">

  <input type="text" class="input" placeholder="Username">

  <i class="fas fa-user"></i>

</div>

<div class="input-form email">

  <input type="text" class="input" placeholder="Email address">

  <i class="fas fa-at"></i>

</div>

<div class="input-form password">

  <input type="password" class="input" placeholder="Password">

  <i class="fas fa-key"></i>

</div>

.input-form{

margin-bottom: 35px;

position: relative;

}

.input-form .input{

width: 100%;

padding: 16px;

padding-left: 80px;

font-size: 18px;

text-align: center;

border: transparent;

color: #fff;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

background: rgba(105, 105, 105, 0.55);

outline: none;

}

Now I have placed the icons in the specified place. We added the icon above but it was not in the input box of the login form. Now I have placed it nicely in that input box and used the color white.

.input-form .fas{

position: absolute;

top: 18px;

left: 35px;

font-size: 20px;

color: #fff;

}

Now using CSS before and after has made this input box more beautiful and modern. First I made a thick line on the left side of the input box using After Effects. 

I have used white as the background color for this line. Then I made another line using before but this line is comparatively much thinner.

.input-form:after{

content: "";

position: absolute;

top: 0;

left: 0;

width: 10px;

height: 100%;

background: #bfb7b7;

}

.input-form:before{

content: "";

position: absolute;

top: 6px;

left: 70px;

width: 2px;

height: 80%;

background: #d4cfd9;

}

Step 4: Create a button in the Transparent Login Form

Now it's time to create a button in the login form of this transfer that will help you log in. Depending on the size of this button.

<div class="btn">

   <a href="#">login</a>

</div>

.btn{

width: 200px;

background: rgba(163, 159, 159, 0.55);

margin: 0 auto;

text-align: center;

border-radius: 5px;

padding: 12px;

}

.btn a{

color: #fff;

text-decoration: none;

text-transform: uppercase;

font-size: 24px;

}

Hopefully from the tutorial above you have learned how I created this transparent login form using HTML and CSS. 

If you have any difficulty in creating this project, you can definitely let me know in the comments. Earlier I shared with you the design of another simple transparent login form.

The download will start automatically