HTML code for login page with username and password

HTML code for login page with username and password

by

In today’s digital world, a well-designed login page is essential for creating a positive user experience. Whether you’re building a website or a web application, a visually appealing and functional login page can leave a lasting impression on your users. In this blog post, I’ll walk you through the process of creating a HTML code for login page with username and password.

Features of the Login Page

Here’s what makes this login page stand out:

  1. Modern Gradient Background: A smooth gradient background creates a vibrant and engaging look.
  2. Glassmorphism Effect: The login container has a semi-transparent background, giving it a sleek, glass-like appearance.
  3. Animations: A subtle fade-in animation makes the login form appear smoothly when the page loads.
  4. Interactive Input Fields: Input fields change border color when focused, improving user interaction.
  5. Gradient Button: The login button uses a gradient background that transitions on hover, adding a dynamic touch.
  6. Responsive Design: The layout adjusts seamlessly for smaller screens, ensuring a great experience on all devices.

Full Code Implementation

Below is the complete HTML and CSS code for the stylish login page. You can copy and paste it into your project and customize it as needed.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylish Login Page</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file -->
</head>
<body>
    <div class="login-container">
        <h2>Welcome Back!</h2>
        <form action="#" method="post">
            <input type="text" id="username" name="username" placeholder="Username" required>
            <input type="password" id="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
        <div class="links">
            <a href="#">Forgot Password?</a> | <a href="#">Create Account</a>
        </div>
    </div>
</body>
</html>
HTML

Styling CSS:

/* General Styles */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #d0e6fc;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: #333;
        }

        /* Login Container */
        .login-container {
            background: rgba(255, 255, 255, 0.9);
            padding: 40px 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 350px;
            text-align: center;
            animation: fadeIn 1s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Header */
        .login-container h2 {
            margin-bottom: 25px;
            font-size: 28px;
            color: #1e73be;
            font-weight: 600;
        }

        /* Input Fields */
        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .login-container input[type="text"]:focus,
        .login-container input[type="password"]:focus {
            border-color: #2575fc;
            outline: none;
        }

        /* Submit Button */
        .login-container input[type="submit"] {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            border: none;
            border-radius: 8px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .login-container input[type="submit"]:hover {
            background: linear-gradient(135deg, #2575fc, #6a11cb);
        }

        /* Additional Links */
        .login-container .links {
            margin-top: 20px;
            font-size: 14px;
        }

        .login-container .links a {
            color: #2575fc;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .login-container .links a:hover {
            color: #6a11cb;
        }

        /* Responsive Design */
        @media (max-width: 480px) {
            .login-container {
                width: 90%;
                padding: 30px 20px;
            }
        }
CSS

How to Use the Code

  1. Copy the Code: Copy the HTML and CSS code provided above.
  2. Create Files: Save the HTML code in a file named index.html and the CSS code in a file named styles.css.
  3. Link CSS: Ensure the CSS file is linked correctly in the HTML file using the <link> tag.
  4. Customize: Modify the colors, fonts, or content to match your brand or project requirements.
  5. Test: Open the index.html file in your browser to see the login page in action.

Customization Ideas

  • Add a Logo: Insert your logo above the “Welcome Back!” heading.
  • Change Colors: Adjust the gradient colors in the background property to match your brand.
  • Add JavaScript Validation: Use JavaScript to validate the username and password fields before submission.
  • Integrate with Backend: Connect the form to a backend system (e.g., Node.js, PHP, or Django) to handle user authentication.

Final Thoughts

This stylish login page is a great starting point for any project. It’s modern, responsive, and easy to customize. Whether you’re building a personal website or a large-scale application, this design will help you create a professional and user-friendly login experience.

View Live Preview ⟶