Transparent login form using HTML and CSS Free Download

The Login form is used to authenticate the user credentials to access the profile or the admin module on the websites. The Transparent login form using html and css contains 2 Textbox named as username, password, and 1 submit button. Once the user can enter the user credentials and click on the submit button authentication has been done and the user can access his profile or admin module.

In the transparent login form, users can also login with Facebook and Google.

Table of Contents

In this tutorial, we are going to learn how to create a Transparent login form using HTML and CSS.

Key Features

Responsive layout
Transparent Background image
Login with Facebook and Google
Easy to customize as per requirement
Design in HTML and CSS

Following are the steps to create the Transparent login form using html and css.

The HTML Code

Index.html – Create index.html and paste the HTML code.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Free download Transparent login form using html and css</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Transparent login form using html and css" />
<meta name="keywords" content="Transparent login form, login form, HTML, CSS, Background Blur, login form using html and css, Avatar Icon, Login with Facebook and Google" />
<meta name="author" content="HTMLCSS3TUTORIALS" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="blur"></div>
<div class="formContent blur"> <img src="images/avtar.jpg" class="avatarImg">
	<h2>Login Form</h2>
	<form>
	<label>Email</label>
	<input type="email" name="email" placeholder="Enter Email" required>
	<label>Password</label>
	<input type="password" name="password" placeholder="Enter Password" required>
	<input type="submit" name="submit" value="Login">
	<div class="remember">
<div class="login"><div class="Oroption">OR</div></div>
<div>Login with Facebook and Google</div>
<div class="links">
	<div class="facebook"><img src="images/facebook.png" alt="Facebook Icon" /> </div>
	<div class="google"> <img src="images/google.png" alt="Facebook Icon" /> </div>
</div>
<div class="signup"> Don't have account? <a href="#">Signup Now</a> </div>
</div>
</form>
</div>
</body>
</html>

<!doctype html>

<head>

<title>Free download Transparent login form using html and css</title>

</head>

<body>

<h2>Login Form</h2>

<form>

<label>Email</label>

<label>Password</label>

<div>Login with Facebook and Google</div>

</div>

<div class="signup"> Don't have account? <a href="#">Signup Now</a> </div>

</div>

</form>

</div>

</body>

</html>

The CSS

style.css : Put the below CSS code in style.css file

@font-face {
	font-family: 'Muli Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Muli Regular'), url('Muli-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Muli Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Muli Bold'), url('Muli-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Muli ExtraBold';
	font-style: normal;
	font-weight: normal;
	src: local('Muli ExtraBold'), url('Muli-ExtraBold.woff') format('woff');
}
body {
	margin: 0;
	padding: 0;
	font-family: "Muli Regular";
}
body:before {
	content: '';
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-image: url("../images/background.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-family: "Muli Regular";
}
.blur {
	background: rgb(0 0 0 / 20%);
	backdrop-filter: blur(6px);
	height: 100vh;
	width: 100%;
}
.formContent {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 550px;
	padding: 80px 40px;
	box-sizing: border-box;
	background: rgb(255 255 255 / 11%);
	box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
	border-radius: 10px;
}
.avatarImg {
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	top: calc(-80px/2);
	left: calc(50% - 40px);
}
.formContent h2 {
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-family: "Muli Bold";
}
.formContent label {
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #fff;
}
.formContent input {
	width: 100%;
	margin-bottom: 20px;
}
.formContent input[type="text"], .formContent input[type="password"], .formContent input[type="email"] {
	border: none;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline: none;
	height: 40px;
	color: #fff;
	font-size: 16px;
}
.formContent input[type="submit"] {
	color: #000;
	font-size: 16px;
	background: #e8e8e8;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #000;
	outline: none;
	margin-top: 5px;
	padding: 10px 10px 10px 10px;
}
.formContent input[type="submit"]:hover {
	color: #fff;
	background: #104e99;
}
.formContent a {
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
input[type="checkbox"] {
	width: 6%;
}
.remember span {
	color: #fff;
	font-family: 'Muli Regular', "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"
}
.remember span a {
	color: #fff;
	font-family: 'Muli Regular', "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"
}
.login {
	color: #fff;
	text-align: center;
	margin: 20px 0;
	font-family: 'Muli Regular', sans-serif;
}
.Oroption:before {
	content: "";
    display: block;
    width: 115px;
    height: 1px;
    background: #e8e8e8;
    left: 0;
    position: absolute;
    left: 15%;
    margin-top: 10px;
}
.Oroption:after {
	content: "";
    display: block;
    width: 115px;
    height: 1px;
    background: #e8e8e8;
    right: 58px;
    /* top: 50%; */
    position: absolute;
    margin-top: -10px;
}
.links {
	display: flex;
	cursor: pointer;
	color: white;
	margin: 0 0 20px 0;
}
.facebook {
	width: 80%;
	height: 31px;
	line-height: 45px;
	border: 1px solid #1f89d4;
	border-radius: 5px;
}
.google {
	width: 80%;
	height: 31px;
	line-height: 45px;
	margin-left: 10px;
	border: 1px solid #fb5859;
	border-radius: 5px;
}
.facebook img, .google img {
	width: 100%;
}
.links i {
	font-size: 17px;
}
i span {
	margin-left: 8px;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 16px;
	font-family: 'Muli Regular', sans-serif;
}
.signup {
	font-size: 15px;
	color: white;
	font-family: 'Muli Regular', sans-serif;
	text-align: center;
}
.signup a {
	color: #387aff;
	text-decoration: none;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

@font-face {

font-family: 'Muli Regular';

font-style: normal;

font-weight: normal;

src: local('Muli Regular'), url('Muli-Regular.woff') format('woff');

}

@font-face {

font-family: 'Muli Bold';

font-style: normal;

font-weight: normal;

src: local('Muli Bold'), url('Muli-Bold.woff') format('woff');

}

@font-face {

font-family: 'Muli ExtraBold';

font-style: normal;

font-weight: normal;

src: local('Muli ExtraBold'), url('Muli-ExtraBold.woff') format('woff');

}

body {

margin: 0;

padding: 0;

font-family: "Muli Regular";

}

body:before {

content: '';

position: fixed;

width: 100vw;

height: 100vh;

background-image: url("../images/background.jpg");

background-position: center center;

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

font-family: "Muli Regular";

}

.blur {

background: rgb(0 0 0 / 20%);

backdrop-filter: blur(6px);

height: 100vh;

width: 100%;

}

.formContent {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 400px;

height: 550px;

padding: 80px 40px;

box-sizing: border-box;

background: rgb(255 255 255 / 11%);

box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);

border-radius: 10px;

}

.avatarImg {

position: absolute;

width: 80px;

height: 80px;

border-radius: 50%;

overflow: hidden;

top: calc(-80px/2);

left: calc(50% - 40px);

}

.formContent h2 {

margin: 0;

padding: 0 0 20px;

color: #fff;

text-align: center;

text-transform: uppercase;

font-family: "Muli Bold";

}

.formContent label {

margin: 0;

padding: 0;

font-weight: bold;

color: #fff;

}

.formContent input {

width: 100%;

margin-bottom: 20px;

}

.formContent input[type="text"], .formContent input[type="password"], .formContent input[type="email"] {

border: none;

border-bottom: 1px solid #fff;

background: transparent;

outline: none;

height: 40px;

color: #fff;

font-size: 16px;

}

.formContent input[type="submit"] {

color: #000;

font-size: 16px;

background: #e8e8e8;

cursor: pointer;

border-radius: 5px;

border: 1px solid #000;

outline: none;

margin-top: 5px;

padding: 10px 10px 10px 10px;

}

.formContent input[type="submit"]:hover {

color: #fff;

background: #104e99;

}

.formContent a {

color: #fff;

font-size: 14px;

font-weight: bold;

text-decoration: none;

}

input[type="checkbox"] {

width: 6%;

}

.remember span {

color: #fff;

font-family: 'Muli Regular', "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"

}

.remember span a {

color: #fff;

font-family: 'Muli Regular', "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"

}

.login {

color: #fff;

text-align: center;

margin: 20px 0;

font-family: 'Muli Regular', sans-serif;

}

.Oroption:before {

content: "";

display: block;

width: 115px;

height: 1px;

background: #e8e8e8;

left: 0;

position: absolute;

left: 15%;

margin-top: 10px;

}

.Oroption:after {

content: "";

display: block;

width: 115px;

height: 1px;

background: #e8e8e8;

right: 58px;

/* top: 50%; */

position: absolute;

margin-top: -10px;

}

.links {

display: flex;

cursor: pointer;

color: white;

margin: 0 0 20px 0;

}

.facebook {

width: 80%;

height: 31px;

line-height: 45px;

border: 1px solid #1f89d4;

border-radius: 5px;

}

.google {

width: 80%;

height: 31px;

line-height: 45px;

margin-left: 10px;

border: 1px solid #fb5859;

border-radius: 5px;

}

.facebook img, .google img {

width: 100%;

}

.links i {

font-size: 17px;

}

i span {

margin-left: 8px;

font-weight: 500;

letter-spacing: 1px;

font-size: 16px;

font-family: 'Muli Regular', sans-serif;

}

.signup {

font-size: 15px;

color: white;

font-family: 'Muli Regular', sans-serif;

text-align: center;

}

.signup a {

color: #387aff;

text-decoration: none;

}

Free Download Source Code for Transparent login form using HTML and CSS here.

Live Demo

Download

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

December 7, 2022

HTMLCSS

Review Page Design in HTML5 Download

Know Details

December 4, 2022

HTMLCSS

Product Grid in HTML5

Know Details

jQuery Carousel Slider With Accordion Style Transitions

June 6, 2022

HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details

Testimonials HTML Template Free Download

January 15, 2022

HTMLCSS

Testimonials HTML Template Free Download

Know Details

Bootstrap Table with Pagination and Search

January 9, 2022

HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Transparent login form using HTML and CSS Free Download

In the transparent login form, users can also login with Facebook and Google.

In this tutorial, we are going to learn how to create a Transparent login form using HTML and CSS.

Key Features

Following are the steps to create the Transparent login form using html and css.

The HTML Code

The CSS

Free Download Source Code for Transparent login form using HTML and CSS here.

Related Post

Owl Carousel Product Slider in HTML5

Review Page Design in HTML5 Download

Product Grid in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Leave a Reply Cancel reply

Search

Donate

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement

Quick Links

Important Links

Share on

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

In the transparent login form, users can also login with Facebook and Google.

In this tutorial, we are going to learn how to create a Transparent login form using HTML and CSS.

Key Features

Following are the steps to create the Transparent login form using html and css.

The HTML Code

The CSS

Free Download Source Code for Transparent login form using HTML and CSS here.

Share this:

Related Post

Owl Carousel Product Slider in HTML5

Review Page Design in HTML5 Download

Product Grid in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Leave a Reply Cancel reply

Search

Donate

Categories

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement