Sign In Form

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Sign In</title>
    <style>
        /* Reset and Base Styles */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            font-family: 'Poppins', sans-serif; /* More modern font */
            background: linear-gradient(135deg, #4e54c8, #8f94fb); /* Gradient background */
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* Prevent scrollbars if content overflows */
        }

.container {
            position: relative;
            width: 80%;
            max-width: 800px;  /* Larger container */
            min-height: 500px;  /* Taller container */
            background: rgba(255, 255, 255, 0.1);  /* Semi-transparent white background */
            backdrop-filter: blur(15px);  /* Glassmorphism blur effect – Works in modern browsers */
            border-radius: 20px; /* More rounded corners */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Stronger shadow */
            display: flex;
            overflow: hidden;
             border: 2px solid rgba(255,255,255,0.25); /* subtle border */
        }

.form-container {
            width: 50%; /* Split into two halves */
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 2; /* Ensure form is above background elements */
        }

.image-container {
          width: 50%;
          background-image: url('https://images.unsplash.com/photo-1519750783826-e2420f4d687f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); /* add background */
          background-size: cover;
          background-position: center;
        }

h2 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 30px;
            color: #fff; /* White text for better contrast */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Text shadow for depth */
        }

/* Form Input Styles */
        .form-group {
            position: relative; /* For absolutely positioning the icons */
            margin-bottom: 30px;
        }

.form-group label {
            position: absolute;
            top: 12px;
            left: 15px;
            color: rgba(255, 255, 255, 0.7);
            pointer-events: none; /* Allows clicking through the label */
            transition: 0.3s ease;
            font-size: 0.9em;
        }

input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 12px 40px 12px 15px;  /* Space for icons on the left */
            border: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.4); /* Lighter bottom border */
            background: transparent; /* Remove background */
            color: #fff;
            font-size: 16px;
            outline: none; /* Remove default outline */
            transition: border-color 0.3s ease;
        }
        input[type="email"]::placeholder,
        input[type="password"]::placeholder{
            color: rgba(255, 255, 255, 0.7);
        }

input[type="email"]:focus,
        input[type="password"]:focus {
            border-bottom-color: #fff; /* Full white on focus */
        }

/* Floating Label Effect */
        input[type="email"]:focus + label,
        input[type="password"]:focus + label,
        input[type="email"]:not(:placeholder-shown) + label,
        input[type="password"]:not(:placeholder-shown) + label

{
            transform: translateY(-20px);
            font-size: 0.8em;
            color: #fff;
        }

/* Button Styles */
        button {
            width: 100%;
            padding: 15px;
            background-color: #fff;
            color: #4e54c8; /* Complementary color */
            border: none;
            border-radius: 30px; /* Pill-shaped button */
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Button shadow */
        }

button:hover {
            background-color: #4e54c8;
            color:#fff;
            transform: translateY(-3px); /* Slight lift on hover */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Increased shadow on hover */
        }

/* Forgot Password Link */
        .forgot-password {
            text-align: center;
            margin-top: 20px;
        }

.forgot-password a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.9em;
            transition: color 0.3s ease;
        }

.forgot-password a:hover {
            color: #fff;
            text-decoration: underline;
        }
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;  /* Stack elements vertically on smaller screens */
                width: 90%;
                min-height: auto; /* Allow height to adjust to content */
            }

.form-container,
            .image-container{
                width: 100%; /* Full width on smaller screens */
             }
                .image-container{
                  display: none;
                }
            }

</style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <h2>Sign In</h2>
            <form>
                <div class="form-group">
                    <input type="email" id="email" name="email" required placeholder=" ">
                    <label for="email">Email</label>

</div>
                <div class="form-group">
                    <input type="password" id="password" name="password" required placeholder=" ">
                    <label for="password">Password</label>

</div>
                <button type="submit">Sign In</button>
                <div class="forgot-password">
                    <a href="#">Forgot Password?</a>
                </div>
            </form>
        </div>
        <div class="image-container">
        </div>
    </div>
</body>
</html>

Sign In Form

Recommended

Search Input

CSS Stage with Light Strings and Stairs

Login

HTML

CSS

JS

Recommended

Search Input

CSS Stage with Light Strings and Stairs

Login

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS