Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Syntax
.transparent-element {
background: none;
background-color: transparent;
border: 1px solid color;
}
Designing a Transparent Login/Sign Up Webpage
The following is the approach
Create a
<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.
Example
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>
<html>
<head>
<title>Transparent Login Form</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQgFBNQTjHfu6rE28rIHC8+F5H" crossorigin="anonymous">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.login-container {
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
background: rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.login-container h1 {
text-align: center;
font-size: 24px;
margin-bottom: 30px;
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
padding-bottom: 10px;
}
.textbox {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 20px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.textbox i {
width: 26px;
float: left;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 80%;
float: left;
margin: 0 10px;
}
.textbox input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.btn {
width: 100%;
background: none;
border: 2px solid rgba(255, 255, 255, 0.4);
color: white;
padding: 12px;
font-size: 18px;
cursor: pointer;
margin: 20px 0;
border-radius: 5px;
transition: all 0.3s ease;
}
.btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
}
</style>
</head>
<body>
<div class="login-container">
<h1>Login Form</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password">
</div>
<input type="button" class="btn" value="Login">
</div>
</body>
</html>
A centered transparent login form appears with a glassmorphism effect. The form has a semi-transparent white background with blur effect, white text, username and password input fields with FontAwesome icons, and a transparent login button with hover effects. The background features a purple gradient.
Key Features
Backdrop Filter: Creates a frosted glass effect using
backdrop-filter: blur(10px)RGBA Colors: Uses
rgba(255, 255, 255, 0.1)for semi-transparent backgroundsTransparent Inputs: Input fields have
background: noneto maintain transparencyHover Effects: Button changes appearance on hover for better user experience
Conclusion
This transparent login form uses modern CSS techniques like backdrop-filter and RGBA colors to create an elegant glassmorphism effect. The transparent design provides a sleek, modern appearance while maintaining usability and accessibility.
2K+ Views
