Introduction
In this tutorial, we will create a modern and responsive login form using HTML and CSS. This form includes stylish input fields, icons, a password show/hide feature, and a gradient design. Whether you’re a beginner or an experienced developer, this guide provides step-by-step instructions to create a professional-looking form. You’ll also get the free downloadable code and a link to the complete video tutorial for better understanding.

Features of the Login Form
- Transparent form design with blur effect.
- Gradient border and submit button.
- Responsive layout for all devices.
- Password visibility toggle.
- Free code download available.
Technologies Used
- HTML5 for structure.
- CSS3 for styling and responsiveness.
- Font Awesome for icons.
Step-by-Step Guide
Step 1: Basic HTML Structure
Start with a basic HTML template and include a element. Add input fields for username and password along with labels.
Step 2: Styling with CSS
Add a background image using Unsplash for a stunning look.
Apply gradient effects to the form’s border and button.
Use CSS for the blur effect on the form.
Step 3: Adding Icons
Use Font Awesome for icons in the input fields and for the password visibility toggle.
Step 4: Making it Responsive
Ensure the form looks good on mobile devices by using media queries.
Code Explanation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Login Form</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body> <div class="background"></div> <form class="login-form"> <div class="form-header"> <i class="fas fa-user-circle"></i> <h2>Login</h2> </div> <label for="username">Username <i class="fas fa-user"></i></label> <input type="text" id="username" placeholder="Enter your username"> <label for="password">Password <i class="fas fa-lock"></i></label> <input type="password" id="password" placeholder="Enter your password"> <i class="fas fa-eye toggle-password"></i> <div class="options"> <label><input type="checkbox"> Remember Me</label> <a href="#">Forgot Password?</a> </div> <button type="submit">Login</button> </form> </body> </html>
body { margin: 0; font-family: Arial, sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://unsplash.com/photos/a-view-of-a-mountain-covered-in-clouds-Vd_s71-WVcA') no-repeat center center/cover; filter: blur(5px); z-index: -1; } .login-form { background: rgba(255, 255, 255, 0.8); padding: 20px; border-radius: 10px; width: 300px; text-align: center; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); border: 2px solid; border-image: linear-gradient(45deg, #6a11cb, #2575fc) 1; } /* Additional styles here */
Free Download & YouTube Tutorial
You can download the code here or watch the YouTube tutorial to understand each step in detail.
login form Free DownloadOR
Watch Video !
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/3d-rotating-logo/
- https://bulganest.com/stylish-login-form-with-transparent-background/
- https://bulganest.com/scientific-calculator/
- https://bulganest.com/learn-css-in-this-ways/