Design a transparent login/Sign Up webpage using HTML and CSS

In HTML, the login forms are used to collect information about the user and have a button to send the details for server-side operations. The login form contains basic information such as Name, Date of birth, Email, Mobile number, Gender, Address, etc. Nowadays, HTML forms are used in almost every website on the Internet to gather user information.

In this article, we are going to design a transparent login form on a webpage using HTML and CSS.

Designing a transparent login/Sign Up webpage

The following is the approach −

  • Create an <div> element with the class named "login-container".

  • Inside that, create another two <div> elements with the class named "textbox" for the username and password fields.

  • Then, add an <input> element with the class "btn" for the login button.

  • Then to make the login form transparent, we styled the ".textbox" input class with the CSS background property set to none.


In the following example, we are using the above approach to design a transparent login form in a webpage using HTML and CSS −

<!DOCTYPE html>
   <title>Transparent Login Form</title>
   <link rel="stylesheet" href="" integrity="sha384-12N37f5QGtxзVEgiss14W3ExzMWZxybE1SJSESQP9S+oqd12jhcu+A56EbclzFSJ" crossorigin="anonymous">
      body {
         margin: 0;
         padding: 0;
         font-family: sans-serif;
         background-color: lightslategray;
         background-size: cover;
         width: 280px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         color: white;
      .login-box h1{
         border-bottom: 6px solid whitesmoke;
         width: 100%;
         overflow: hidden;
         font-size: 20px;
         padding: 8px 0;
         margin: 8px 0;
         border-bottom: 1px solid whitesmoke;
      .textbox i {
         width: 26px;
         float: left;
         text-align: center;
      .textbox input{
         border: none;
         outline: none;
         background: none;
         color: white;
         font-size: 18px;
         width: 80%;
         float: left;
         margin: 0 10px;
         width: 100%;
         background: none;
         border: 2px solid whitesmoke;
         color: white;
         padding: 5px;
         font-size: 18px;
         cursor: pointer;
         margin: 12px 0;
         text-align: center;
         padding-bottom: 50px;
         color: purple;
   <div class="login-container">
      <h1>Tutorialspoint - Login</h1>
      <div class="textbox">
         <i class="fas fa-user"></i>
         <input type="text" placeholder="Username">
      <div class="textbox">
         <i class="fas fa-lock"></i>
         <input type="password" placeholder="password">
      <input type="button" class="btn" value="Login">

Updated on: 04-Aug-2023


Kickstart Your Career

Get certified by completing the course

Get Started