Neumorphism Login Form Using Bootstrap 5, HTML & CSS with Hover Effects

Modern Neumorphism Login Form using HTML, CSS, and Bootstrap 5 with responsive design, soft UI styling, and smooth hover effects. Perfect for beginners and developers.

Neumorphism Login Form with Bootstrap 5 & Hover Effects

Now a days it's very important to have a best user experience and interface modern websites and web applications require clean, attractive, and user-friendly login pages to create a great first impression. This Neumorphism Login Form is built using HTML, CSS, and Bootstrap 5, combining a soft 3D-inspired design with smooth hover effects to deliver a modern authentication interface. The neumorphism design style creates subtle shadows and highlights that make buttons, input fields, and cards appear slightly raised from the background, resulting in a premium and elegant user experience.

Whether you are learning front-end development or building a real-world website, this Bootstrap 5 login form is a great project to explore modern UI design techniques.

Neumorphism Login Form Using Bootstrap 5:

A Neumorphism Login Form is a modern authentication interface that follows the popular Soft UI design trend. Unlike traditional flat designs, neumorphism combines soft shadows, subtle highlights, and smooth borders to create a realistic depth effect while maintaining a clean and minimal appearance. In this project, HTML is used to build the structure of the login form, Bootstrap 5 provides a responsive grid system and mobile-friendly layout, while custom CSS creates the neumorphism styling, soft shadows, rounded corners, and elegant hover effects that enhance the overall user experience.

Steps to Create Neumorphism Login Form

Follow these simple steps to build this login form:

Create a project folder (e.g., neumorphism-login-form).
Inside the folder, create three files: index.html, style.css.
Design the login form structure using HTML and Bootstrap 5 classes.
Add the Bootstrap 5 CDN link inside the HTML document.

                            
                                <!DOCTYPE html>

<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphism Login Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    </head>
<body>
    
    <main class="d-flex justify-content-center align-items-center min-vh-100">
        <div class="neumorphic-card">
            <h1 class="text-center fw-bold mb-4" style="color: var(--main-color);">Login</h1>
            <form>
                <div class="mb-4">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control neumorphic-input" required id="email" aria-describedby="emailHelp" placeholder="Enter your email">
                </div>
                <div class="mb-4">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control neumorphic-input" required id="password" placeholder="Enter your password">
                </div>
                <div class="d-grid">
                    <button type="submit" class="btn neumorphic-btn">Login</button>
                </div>
                <div class="mt-4 text-center">
                    <a href="#" class="text-secondary text-decoration-none">Forgot Password?</a>
                </div>
            </form>
        </div>
    </main>


</body>
</html>

Apply Neumorphism styling using CSS box-shadow effects. Add hover animations for interactive UI experience. Make the layout fully responsive for all screen sizes. Save the files and open the project in a browser to view the transparent login page.

                            
                                <style>
        :root {
            --bg-color: #e0e5ec;
            --main-color: #3f4e6d;
            --shadow-light: #ffffff;
            --shadow-dark: #a3b1c6;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
        }
        .neumorphic-card {
            background-color: var(--bg-color);
            border-radius: 20px;
            box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
            padding: 3rem;
            max-width: 450px;  
            width: 100%;
            transition: all .8s ease-in-out;
        }
        .neumorphic-card:hover {
            box-shadow: 8px 8px 16px var(--shadow-light) , -8px -8px 16px var(--shadow-dark) ;
        }
        .neumorphic-input {
            height: 50px;
            background-color: var(--bg-color);
            border: none;
            border-radius: 10px;
            box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
            transition: all 0.3s ease;
        }
          .neumorphic-input:focus {
            background-color: var(--bg-color);
            box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light), 0 0 0 3px var(--main-color);
            border: none;
            outline: none;
        }
        .neumorphic-btn {
            margin-top: 15px;
            background-color: var(--bg-color);
            color: var(--main-color);
            border-radius: 10px;
            font-weight: 600;
            box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
            transition: all 0.5s ease-in-out;
            border: none;
            padding: 1rem;
        }
         .neumorphic-btn:hover {
            transform: scale(0.98);
            background-color: var(--main-color);
            color: var(--shadow-light);
        }
        .form-label {
            color: var(--main-color);
            font-weight: 500;
        }
    </style>

Download Code Files