CSS Transparent Login Form Design

byCodingFlicks -September 28, 2023

0

A login form is a section of the website where users can enter some of their unique information to access some of the website's features or services. Two of these unique pieces of information are username and password. Our code snippet today is about designing a transparent login form. The following video tutorial shows the steps to create this snippet. If you like the contents of our YouTube channel, please subscribe to us.

Video Tutorial:

Hope you have watched the above video. The login form prioritizes the protection of users' personal information. Through this, only authorized persons can use the features or services of a website. There are some websites that make their services or content available only to specific users. To get that, you have to get access by logging in. The login form is mainly used to recognize you. A transparent login form is a type of login form whose background opacity is light so that the website content can be seen through the login form. Suppose you use a nice background image and you don't want the login form box to completely cover it. In that case, you can use this transparent login form concept. Sometimes this transparent login form is made or used thinking about the aesthetics or design of the website. There are some websites that are based on a particular theme or concept that a transparent login form suits better.

You May like this:

CSS transparent form design [ Source Code ]:

Create HTML and CSS files to create this HTML CSS Transparent Login Form. Then copy the code from the code box below and paste it in your files. In case of any problem, you can download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <title>Transparent login form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contact-form">
        <img src="2.jpg" class="avatar">
        <h2>login Form</h2>
        <form>
            <input type="text" name="" placeholder="Enter Your Email">
            <input type="password" name="" placeholder="Enter Your Password">
            <div class="btn-area">
                <button type="button" class="btn2">LOGIN</button>
            </div>
            <p class="rem"><input type="checkbox"> Keep me signed in on this device</p>
        </form>
    </div>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	background-image: url(1.jpg);
	background-size: cover;
	background-attachment: fixed;
	height: 100vh;
	font-family: sans-serif;
}
.contact-form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 500px;
	padding: 80px 40px;
	box-sizing: border-box;
	background-color: rgba(41, 39, 39, 0.3);
	box-shadow: 0 5px 30px black;
}
.avatar {
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	top: calc(-80px/2);
	left: calc(50% - 50px);
	border: 10px solid #fff;
}
.contact-form h2 {
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.contact-form p {
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #fff;
}
.contact-form input {	
	border: none;
	border-bottom-color: currentcolor;
	border-bottom-style: none;
	border-bottom-width: medium;
	width: 90%;
	border-bottom: 2px solid white;
	padding: 10px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: bold;
	background-color: transparent;
	color: white;
}
.contact-form input[type="text"], 
.contact-form input[type="password"] {
	border: none;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline: none;
	height: 40px;
	color: #fff;
	font-size: 16px;
}
.btn2 {
	padding: 10px;
	width: 150px;
	border-radius: 20px;
	background-color: rgb(10, 136, 43);
	border-style: none;
	color: white;
	font-weight: 600;
	margin: 10% 0;
}
.btn-area {
	display: flex;
	justify-content: center;
}
.contact-form a {
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
.rem {
	text-align: center;
	color: rgb(199, 197, 197) !important;
	font-size: 16px;
}
input[type="checkbox"] {
	width: 5%;
}

We think you have implemented the code correctly. Our website has many more snippets about CSS animations, full website design, JavaScript etc. To get them, click on the Load More button below the homepage of the website. Thank you. Hope you visit our website again.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.