Transparent Login Form using HTML & CSS (2022 Update)

Transparent Login Form using HTML & CSS

This tutorial will help you if you want to create a Transparent Login Form using HTML and CSS. However, the CSS transparent login form is much more attractive than other login designs.

This login form is used to access the accounts of various websites. The login form is basically the gateway to access any website's account. Earlier I shared with you the design of many types of Transparent Login Form. It is very simple and is basically made with HTML and CSS.

The background of this login form is transparent, that is, the elements in the background are clearly visible. For this design, I have used a colorful image in the background. Everything is here as a normal login form. 

Transparent Login Form

This tutorial will help you if you want to create a Complete Responsive Transparent Login Form.

Below I have given a preview that will help you to know how this Transparent Login Formworks. Here you will find the necessary explanations and step-by-step tutorials.

See the Pen Responsive Transparent Login Form by Ground Tutorial (@groundtutorial) on CodePen.


I have used a background image on the first webpage as you saw above. You can use any image of your choice in place of this image. You can also use different types of elements. Then an area was created. 

Transparent background of that area has been used. However, in this case, I have used backdrop-filter: blur (10px) to make the background of the Transparent Login Form a bit blurry.

How to Create Transparent Login Form

First, there is a heading then there are two input boxes. Each of the input boxes uses a placeholder, icon, and label. Then there is the option of forget password. 

There is a login button at the end of all. All in all, this is a simple transparent login form design that I created only with HTML and CSS.

Step 1: Basic structure of login form

The basic structure of this login form has been created using the following HTML and CSS codes.

<div class="wrapper">
 
</div>

The webpage has been designed by the following CSS and I have used an image in the background of the web page. 

If you look at the results below, you will understand that the basic structure of the login form is not available here. Because here I did not use any background color.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
text-decoration: none;
letter-spacing: 1px;
}

body{
background: url("https://www.wallpaperuse.com/wallp/47-478047_m.jpg");
background-position: center;
background-repeat: no-repeat;
}

.wrapper{
max-width: 350px;
height: 100%;
margin: 50px auto;
padding: 10px;
}

Basic structure of login form

Step 2: Add headings to the form

Headings have been created in the login form using the following HTML and CSS code. The h1 tag has been used for this heading.

<div class="title"><h1>Sign in</h1></div>


.wrapper .title h1{
text-align: center;
color: #fff;
margin-bottom: 30px;
}
Add headings to the form

Step 3: Information of Transparent Login Form

I have created different types of information in the login form using the following codes. Namely email and password input box, forget password option, login button, etc. All of this information has been added by the following HTML.

<div class="login-container">

  <div class="email">
    <label class="label">Email ID</label>
    <input type="text" class="input" placeholder="xyz@gmail.com">
    <i class="fas fa-address-book"></i>
  </div>

  <div class="password">
    <label class="label">Password</label>
    <input type="text" class="input" placeholder="*********">
   <i class="fas fa-lock"></i>
  </div>

  <div class="forgot">
    <a href="#">Forgot Password ?</a>
    <div style="clear: both;"></div>
  </div>

  <div class="login">
    <a href="#">Login</a>
  </div>

</div>

Now is the time to design the above HTML step by step. First I put the two input boxes in the right place. Margins have been used to keep the distance between the two input boxes.

.login-container{
width: 100%
}

.login-container .email{
margin-bottom: 35px;
position: relative;
}

.login-container .password{
margin-bottom: 20px;
position: relative;
}

Information of Transparent Login Form

Step 4: Design labels and input spaces

I designed the level and input boxes using the code below. The size of the input box depends on the padding and a white border of 2 pixels is used all around. The border will help to clearly understand the input box on the transparent background.

.login-container .label{
display: block;
color: #edeef5;
margin-bottom: 5px;
}

.login-container .input{
max-width: 325px;
width: 100%;
border: 2px solid rgb(180, 179, 180);
padding: 20px 15px;
font-size: 16px;
border-radius: 5px;
background: rgba(105, 105, 105, 0.55);
font-weight: bold;
outline: none;
}

Design labels and input spaces

Step 5: Design icons and placeholders

With the help of CSS below, I have designed the icons and placeholder in the input box. There is an icon along the right side of the input box.

.login-container .fas{
position: absolute;
bottom: 15px;
right: 25px;
font-size: 25px;
color: #ecf1f6;
}

::-webkit-input-placeholder {
color: #d2dbe4;
}

Design icons and placeholders

There is an option of "forget password". The following CSS has been used to design that option.

.login-container .forgot{
margin-bottom: 30px;
}

.login-container .forgot a{
float: right;
color: #e4e81b;
transition: all 0.5s ease;
}

.login-container .forgot a:hover{
color: #fff;
}

Transparent Login Form

Step 6: Design the Transparent Login Form button

The CSS below has designed the login button in the Transparent Login Form. Blue color has been used in the background of the button.

.login{
background: #177ea3;
text-align:  center;
border-radius: 5px;
padding: 20px;

}
.login a{
font-size: 20px;
color: #fff;
}

Design the Transparent Login Form button

Step 7: Design the Transparent Form background

The login form we created above has no size. That means no color was used in the background. Now I will blur the background of this Transparent Login Form a bit. If you want to blur the background, use the following code instead of ".wrapper".

.wrapper{
max-width: 350px;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.438);
border-radius: 8px;
background: rgba(105, 105, 105, 0.2);
backdrop-filter: blur(10px);
margin: 50px auto;
padding: 15px;
}

Design the Transparent Form background

I hope you have learned from the above tutorial how I created this Simple Transparent Login Form using HTML and CSS. It is fully responsive and you can use it directly in your project. 

If you want to download the source code required to create this CSS transparent login form, use the button below.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more