Simple Transparent Login Form using HTML CSS

You must have heard about Transparent Login Form which is much more interesting than normal login form. The only difference between the normal login form and the css transparent login form.

In the case of transparent login form html, the elements in the background are clearly visible. That means the background of the login form is completely transparent. It is much more attractive and beautiful than the general design.

✅✅ Live Preview 👉👉 Transparent Login Form

In this tutorial I have shown you how to create a simple transparent login form using HTML and CSS. Earlier I shared with you the tutorials of different types of login forms.

If you know Basic HTML CSS then you can create this Transparent Login Form html css.

Transparent Login Form HTML Code

This simple transfer login form has been created using the following html codes. Here I first gave all the information then designed by css. First we created the basic structure of the login form.

A heading has been created first in the Transparent Login Form. Then created two input boxes within an input area. The first input box is to input the email ID and the second input box is the password. Then there is a simple login button.

There are two social sharing buttons at the end of all. If you want to create this project (Transparent Login Form with HTML and CSS) then you can copy all the following HTML codes and use them in your html file.

<!--Basic structure of login form-->
<div class="content">
<!--heading -->
 <div class="text">Login Form</div>

  <form action="#">
<!--Place to input email-->
    <div class="field">
      <span class="fa fa-user"></span>
      <input type="text" placeholder="Email Id" required>
    </div>

<!--Place to input password-->
    <div class="field">
      <span class="fa fa-lock"></span>
      <input type="password" placeholder="Password">
    </div>
 <!--login button -->   
    <button>Log in</button>

    <div class="or">Or</div>
<!--social icon -->
   <div class="icon-button"> 
      <span class="facebook"><i class="fa fa-facebook"></i>  Facebook</span>
      <span><i class="fa fa-google"></i>  Google</span>
   </div>

  </form>
</div>

Transparent Login Form CSS

As you can see above, all the information has been added by the HTML code. Now it has to be designed by CSS code. Here I have used absolutely simple css. If you have a general idea about css then you can easily understand.

First I designed the webpage using some amount of css and used a background image in the webpage. You can change the image of your choice here. Then I created the basic structure of the Transparent Login Form.

The width: 330px and height of this login form depends on the amount of content. The background is completely transparent so shadow has been used here to understand the size of the element.

Then I designed the headings and input spaces. After all, I have designed the social sharing buttons. Backdrop-filter: blur (10px) has been used to blur the background of the buttons.

/*Basic design of webpage*/
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

 html{
  background: url("http://driving-tests.org/wp-content/uploads/2012/03/night-road.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
 }

body{
  display: grid;
  place-items: center;
  text-align: center;
  background-size: cover;
}
/*Basic design of login form*/
.content{
  width: 330px;
  border-radius: 10px;
  padding: 40px 30px;
  margin-top: 100px;
  box-shadow: -3px -3px 9px #aaa9a9a2,
              3px 3px 7px rgba(147, 149, 151, 0.671);
}
/*Design the headings*/
.content .text{
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 35px;
  color: rgb(247, 233, 233);
}
/*Design the input spaces*/
.content .field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}

.field input{
  height: 100%;
  width: 100%;
  padding-left: 45px;
  font-size: 18px;
  outline: none;
  border: none;
  color: #e0d2d2;
  border: 1px solid rgba(255, 255, 255, 0.438);
  border-radius: 8px;
  background: rgba(105, 105, 105, 0);
}

.field input::placeholder{
  color: #e0d2d2a6;
}
.field:nth-child(2){
  margin-top: 20px;
}

.field span{
  position: absolute;
  width: 50px;
  line-height: 50px;
  color: #ffffff;
}
/* login button */
button{
  margin: 25px 0 0 0;
  width: 100%;
  height: 50px;
  color: rgb(238, 226, 226);
  font-size: 18px;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.438);
  border-radius: 8px;
  background: rgba(105, 105, 105, 0);
 margin-top: 40px;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}

.content .or{
  color: rgba(255, 255, 255, 0.733);
  margin-top: 9px;
}
/* social buttons */ 
.icon-button{
  margin-top: 15px;
}
.icon-button span{
  padding-left: 17px;
  padding-right: 17px;
  padding-top: 6px;
  padding-bottom: 6px;
   color: rgba(244, 247, 250, 0.795);
 border-radius: 5px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.164);
    backdrop-filter: blur(10px);
}

.icon-button span.facebook{
  margin-right: 17px;
}

button:hover,
.icon-button span:hover{
  background-color: #babecc8c;
}

We hope you have been able to create the login form for this transparent using the codes above.

I have already shared a step-by-step tutorial on how to create a transparent login form. If you do not understand the code above then you can follow that tutorial.

If you want the source code of this Transparent Login Form css then use the link below.

✅✅ Source Code 👉👉 Transparent Login Form