Glassmorphic login form

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphic Sign In/Sign Up Form - Rotating</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>

<div class="flip-container">
        <div class="flipper">
            <div class="front glass-form">
                <h2>تسجيل الدخول</h2>
                <input type="text" placeholder="اسم المستخدم">
                <input type="password" placeholder="كلمة المرور">
                <div class="remember-me">
                    <input type="checkbox" id="rememberMe">
                    <label for="rememberMe">تذكرني </label>
                </div>
                <button>تسجيل الدخول</button>
                <p>ليس لديك حساب؟ <span id="signUpToggle">سجل الآن</span></p>
            <div class="social-icons">
                    <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-google"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            
            <div class="back glass-form">
                <h2>إنشاء حساب</h2>
                <input type="text" placeholder="اسم المستخدم">
                <input type="email" placeholder="البريد الإلكتروني">
                <input type="password" placeholder="كلمة المرور">
                <input type="password" placeholder="تأكيد كلمة المرور">
                <button>إنشاء حساب</button>
                <p>لديك حساب بالفعل؟ <span id="signInToggle">تسجيل الدخول</span></p>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* --- التعديل هنا لإضافة خلفية --- */
    background: linear-gradient(135deg, #0d0e0f, #9bfefe); /* تدرج لوني من الأزرق الفاتح إلى البنفسجي الفاتح */
    /* يمكنك استبدال السطر أعلاه بخلفية صورة إذا أردت: */
    /* background: url('your-image.jpg') no-repeat center center fixed; */
    /* background-size: cover; */
    /* ---------------------------------- */
    overflow: hidden; /* لمنع ظهور أشرطة التمرير أثناء الحركة */
}

/* Container for 3D perspective */
.flip-container {
    perspective: 1000px; /* Important for 3D effect */
    width: 380px; /* Must match form width */
    height: 520px; /* Must match form height */
}

/* The flipper element that will actually rotate */
.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s; /* Longer transition for rotation */
    transform-style: preserve-3d; /* Key for preserving 3D space */
}

/* Rotated state */
.flip-container.flipped .flipper {
    transform: rotateY(180deg);
}

/* Common glassmorphic style for front and back of the form */
.glass-form {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Hide the back side when facing away */
    backface-visibility: hidden; /* Hide the back side when facing away */
    
    background: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}

/* Styling for the back side (Sign Up) */
.back {
    transform: rotateY(180deg); /* Initial rotation for the back side */
}

h2 {
    margin-bottom: 25px;
    font-size: 2.2em;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

input {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 80%;
    border-radius: 25px;
    box-sizing: border-box;
    color: #fff;
    outline: none;
    transition: background-color 0.3s ease;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

input:focus {
    background-color: rgba(255, 255, 255, 0.5);
}

button {
    background-color: #28a745;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    padding: 12px 45px;
    border-radius: 25px;
    border: 1px solid #28a745;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

p {
    margin-top: 20px;
    font-size: 0.9em;
}

span {
    color: #ffd700;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s ease;
}

span:hover {
    color: #ffc107;
    text-decoration: underline;
}

.remember-me {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 80%;
    justify-content: flex-start;
    color: #fff;
}

.remember-me input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    accent-color: #28a745;
}

.social-icons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    color: #e0f021;
    text-decoration: none;
    font-size: 1.4em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px hsla(60, 7%, 39%, 0.2);
}

.social-icon:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

JS

document.addEventListener('DOMContentLoaded', () => {
    const flipContainer = document.querySelector('.flip-container');
    const signUpToggle = document.getElementById('signUpToggle');
    const signInToggle = document.getElementById('signInToggle');
    const rememberMeCheckbox = document.getElementById('rememberMe');
    const signInUsernameInput = document.querySelector('.front input[type="text"]');

// Function to flip to the sign-up panel
    signUpToggle.addEventListener('click', () => {
        flipContainer.classList.add('flipped');
    });

// Function to flip back to the sign-in panel
    signInToggle.addEventListener('click', () => {
        flipContainer.classList.remove('flipped');
    });

// "Remember Me" functionality using Local Storage
    // Load remembered username on page load
    const rememberedUsername = localStorage.getItem('rememberedUsername');
    if (rememberedUsername) {
        signInUsernameInput.value = rememberedUsername;
        rememberMeCheckbox.checked = true;
    }

// Example of saving "remember me" preference on sign-in (you'd integrate this with your actual sign-in logic)
    document.querySelector('.front button').addEventListener('click', () => {
        if (rememberMeCheckbox.checked) {
            localStorage.setItem('rememberedUsername', signInUsernameInput.value);
            // In a real app, you'd also save a token or session info securely
        } else {
            localStorage.removeItem('rememberedUsername');
        }
        // Add your actual sign-in form submission logic here
        alert('تسجيل الدخول (مع أو بدون تذكر المستخدم)');
    });
});

Glassmorphic login form

Recommended

Multicolor login form

HTML Login Form Code

Login with registration

HTML

CSS

JS

Recommended

Multicolor login form

HTML Login Form Code

Login with registration

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS