Introduction
In today s tutorial, we will be designing a modern and stylish login form using HTML and CSS. This form features a transparent background with a stunning blur effect to give it a professional, sleek, and contemporary look. Whether you’re a beginner or an experienced web developer, this tutorial will help you create an eye-catching form that you can easily integrate into your projects.
If you’re new to web development or just looking for a refreshing design for your login form, this guide will provide you with all the necessary steps. Plus, you can download the code for free and view a video tutorial on my YouTube channel.
Why This Login Form Design?
- Modern Aesthetics: The use of a transparent background and blur effect creates a clean and professional look.
- Responsive: The form works seamlessly across all devices, making it ideal for web projects.
- Customization: You can easily tweak colors, fonts, and the form’s layout to suit your personal or brand style.
- Free Code: Get all the code used in this tutorial for free! Simply visit my website to download the code and start building.
Features of This Login Form
- HTML Structure: The basic layout of the login form with input fields for username, email, and password.
- CSS Styling: This includes the transparent background, blur effect, and modern button styling.
- Password Toggle: A feature that allows users to toggle the password visibility by clicking an eye icon.
- Responsive Design: The form is fully responsive, making it accessible and usable on any device.
- Font Awesome Icons: We use Font Awesome to add a stylish user icon inside the input fields.
Step-by-Step Code Explanation
Here s the HTML and CSS code to create this stunning login form. Follow along and feel free to modify it according to your preferences.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form with Blur Effect</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<div class="login-form">
<h2>Login</h2>
<div class="user-icon">
<i class="fas fa-user-circle"></i>
</div>
<form action="#" method="POST">
<input type="text" name="username" id="username" placeholder="Username" required>
<input type="email" name="email" id="email" placeholder="Email" required>
<div class="password-container">
<input type="password" name="password" id="password" placeholder="Password" required>
<span id="eye-icon" class="fas fa-eye-slash"></span>
</div>
<button type="submit" class="submit-btn">Login</button>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code:
/* Global Styles */
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: url('https://www.example.com/your-image.jpg') no-repeat center center fixed;
background-size: cover;
}
/* Login Form Styles */
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
backdrop-filter: blur(8px);
}
.login-form {
background: rgba(255, 255, 255, 0.6);
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
text-align: center;
}
.login-form h2 {
margin-bottom: 20px;
font-family: 'Arial', sans-serif;
color: #333;
}
/* User Icon */
.user-icon {
margin-bottom: 20px;
}
.user-icon i {
font-size: 50px;
color: #f39c12;
}
/* Input Fields */
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
/* Password Toggle */
.password-container {
position: relative;
}
#eye-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #f39c12;
}
/* Submit Button */
.submit-btn {
width: 100%;
padding: 12px;
background-color: #f39c12;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
cursor: pointer;
}
.submit-btn:hover {
background-color: #e67e22;
}
JavaScript Code:
const eyeIcon = document.getElementById('eye-icon');
const passwordInput = document.getElementById('password');
eyeIcon.addEventListener('click', function() {
const type = passwordInput.type === 'password' ? 'text' : 'password';
passwordInput.type = type;
eyeIcon.classList.toggle('fa-eye');
eyeIcon.classList.toggle('fa-eye-slash');
});
How This Works:
- HTML Structure: The basic structure consists of an outer container (login-container) that centers the login form. Inside this form, there are fields for username, email, and password. The password field also has an icon that users can click to toggle the password visibility.
- CSS Styling: The styling involves making the form responsive, adding a blur effect to the background using backdrop-filter, and giving the form a modern design with transparent and blurred backgrounds.
- JavaScript: The JavaScript part handles the password visibility toggle. When the eye icon is clicked, it switches between showing and hiding the password.
Why This Form is Special?
This login form is designed to be user-friendly, visually appealing, and easy to integrate into your website. The blur effect and transparent background create an elegant, minimalist look that works well with any website design. Plus, the password visibility toggle improves usability by letting users easily view their typed passwords.
Get the Code for Free!
You can get all the HTML, CSS, and JavaScript code from this tutorial free of charge on my website. Simply visit the link below to download and use the code in your own projects.
Free DownloadWatch the Video Tutorial
If you prefer video tutorials, check out my YouTube channel where I go over every detail of this login form tutorial. Watch the full video for additional tips, tricks, and explanations!
Link: https://youtu.be/92z7vgsJ0Co
Press link to watch video otherwise watch on my web
Conclusion
This login form tutorial is perfect for web developers who want to enhance their skills and create a beautiful, functional login page. The combination of HTML, CSS, and JavaScript makes it easy to customize, and the free code ensures that you can get started immediately without any hassle.