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 of Stylish Login Form!
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.
Watch 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 of stylish login form
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
People Also ask Questions:
You can find free code examples on platforms like CodePen, GitHub, and Dev.to. Additionally, YouTube tutorials provide step-by-step guidance on creating a stylish login form with modern CSS effects.
Yes, if backdrop-filter is not supported, you can use alternative methods like a pre-blurred background image, a ::before pseudo-element with filter: blur(), or an SVG-based blur filter. These techniques help maintain the glassmorphism effect even in unsupported browsers.
The backdrop-filter property is supported in modern browsers like Chrome, Edge, and Safari but may not work in older versions of Firefox or Internet Explorer. To ensure compatibility, use a semi-transparent background color or a pre-blurred background image as a fallback.
To ensure the login form looks good on all devices, use relative units (em, rem, %), apply media queries for different screen sizes, and use contrasting colors for text to improve readability. Also, test the form on various devices to make sure it maintains its stylish appearance and functionality.
You can create a stylish login form with a transparent background and blur effect using the backdrop-filter property in CSS. Apply background: rgba(255, 255, 255, 0.3); and backdrop-filter: blur(10px); to the form container. This will create a frosted glass effect, making the form visually appealing while keeping the content readable.
Read My Others Post’s
- https://bulganest.com/creating-stunning-hearts-animation-with-css-free-falling-and-blinking-heart-with-free-code/
- https://bulganest.com/how-to-create-a-modern-layout-using-css-grid-and-flexbox/
Anime.js Explained in 60 Seconds – For Beginners
Share With FriendsIntroduction of Anime.js In the world of web development, animation plays a huge role in making websites interactive […]
19 Common CSS Grid and Flexbox Issues You Need to Fix Now!
Share With FriendsIntroduction In today’s web development landscape, CSS Grid and Flexbox are essential tools that every developer must master. […]
Stop Using CSS Grid and Flexbox Wrong! Try These Tips
Modern web development relies heavily on responsive and flexible layouts to provide a seamless user experience across devices. CSS Grid and Flexbox are two of the most powerful tools for web designers and developers.
CSS Gradient Generator Tool Online
Share With FriendsA custom gradient color maker is an essential tool for web designers and developers that simplifies the process […]
Login Form with Blur Effect
Login
Login