Transparent Login & Signup Using HTML, CSS & Bootstrap 3

Learn how to create a transparent login form using Bootstrap 3, HTML5, and CSS3

Transparent Login Form | Bootstrap 3 Responsive Login & Signup Form

Transparent Login Form Using Bootstrap 3, HTML5 & CSS3

This Transparent Login Form is designed using Bootstrap 3, HTML5, and CSS3 to create a modern and visually appealing authentication interface. The transparent background effect gives the login page a clean and professional look, making it suitable for portfolios, business websites, admin panels, and web applications.

The project includes responsive design techniques, animated form elements, and stylish input fields that enhance user experience across different devices. Bootstrap 3 is used to build a flexible layout, while custom CSS adds transparency effects, hover animations, and modern styling to the login and signup forms.

Steps to Create a Transparent Login Form Using Bootstrap 3

Follow these simple steps to build a responsive transparent login and signup page:

Create a project folder, for example, transparent-login-form.
Inside the folder, create an index.html file.
Add the Bootstrap 3 CDN link inside the HTML document.

                            
                                <!DOCTYPE html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->

<html>
<head>
	<title>Login Form</title>
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<style>
body{
	background-color: rgba(0,0,0,0.6);
}



#bgimage{
	background-image: url(image2.jpg);
	background-size: cover;
	border-radius: 10px;
}

.heading1{
	font-family: monospace;
	font-weight: bold;
	text-align: center;
	color: white;
}
label{
	color: white;
	font-family: sans-serif;
}
input[type=Email] , input[type=Password]{
    background: transparent;
    color: white;
    font-family: monospace;
}
input[type=Email]::placeholder , input[type=Password]::placeholder{
	color: white;

}

.btn-success{
   background : transparent;
   transition: 0.5s ease;
   letter-spacing: 2px;
   font-family: monospace;
   font-size: 15px;

}

a{
	color: white;
	transition: 0.3s ease;
	
	
}
a:hover{
	text-decoration: none;
  color: #ededed;	
}

</style>

<body>
<br><br>
<div class="container-fluid">
	<div class="col-md-3"></div>


<div class="col-md-6" >


<div id="bgimage" >
<br><br>
	<h1 class="heading1" >Sign In</h1>
<br>	<br><br><br>
<div class="row">
	<div class="col-md-3"></div>
<div class="col-md-6" style="margin-left: 5px;margin-right: 5px;">
<form>
<label >Username</label>
<input type="Email" name="Email" class="form-control" required=""   placeholder="Email" />

</div>

<div class="col-md-3"></div>
</div>
<br><br>
<div class="row">
	<div class="col-md-3"></div>
<div class="col-md-6" style="margin-left: 5px;margin-right: 5px;">

<label>Password</label>
<input type="Password" name="pass" class="form-control" required="" placeholder="Password" />
<br><a href="#" > Forget password?</a>
</div>

<div class="col-md-3"></div>
</div>
<br>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-2" style="margin-left: 5px;margin-right: 5px;"><br><br>
<button class="btn btn-success btn-block"  type="Submit">Submit</button>
</div>


<div class="col-md-5"></div>
</div>
<br><br><br><br><br>
</form>
</div>



	<div class="col-md-3"></div>


</div>

</div>

</body>
</html>

Add transparent backgrounds and custom styling using CSS. Apply animations and hover effects to buttons and input fields. Save the files and open the project in a browser to view the transparent login page.

                            
                                <style>
body{
	background-color: rgba(0,0,0,0.6);
}



#bgimage{
	background-image: url(image2.jpg);
	background-size: cover;
	border-radius: 10px;
}

.heading1{
	font-family: monospace;
	font-weight: bold;
	text-align: center;
	color: white;
}
label{
	color: white;
	font-family: sans-serif;
}
input[type=Email] , input[type=Password]{
    background: transparent;
    color: white;
    font-family: monospace;
}
input[type=Email]::placeholder , input[type=Password]::placeholder{
	color: white;

}

.btn-success{
   background : transparent;
   transition: 0.5s ease;
   letter-spacing: 2px;
   font-family: monospace;
   font-size: 15px;

}

a{
	color: white;
	transition: 0.3s ease;
	
	
}
a:hover{
	text-decoration: none;
  color: #ededed;	
}

</style>

Download Code Files