Login Page

Aaj hum ek modern animated login page banayenge jisme Glow Effect use kiya gaya hai. Ye design stylish bhi hai aur responsive bhi, jo har device par smooth chalega.

✨ Features of This Login Page

Beautiful glowing border animation
Responsive design (mobile & desktop)
Simple HTML, CSS & JavaScript code
User-friendly UI with smooth effects

📌 HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIP Login & Signup | Sanant Bhai</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body>
    <!-- Particle Background -->
    <canvas id="particles"></canvas>

    <!-- Login/Signup Card -->
    <div class="wrapper">
        <div class="card" id="card">
            <div class="inner-box">

                <!-- Login Box -->
                <div class="card-front">
                    <h2>Welcome Back</h2>
                    <form>
                        <input type="email" class="input-box" placeholder="Email" required>

                        <div class="password-box">
                            <input type="password" id="login-pass" class="input-box" placeholder="Password" required>
                            <i class="fa-solid fa-eye toggle-pass" onclick="togglePassword('login-pass', this)"></i>
                        </div>

                        <button type="submit" class="submit-btn">Login</button>
                    </form>
                    <button class="switch-btn" onclick="openSignup()">I'm New Here</button>
                    <a href="#" class="forgot-link">Forgot Password?</a>
                </div>

                <!-- Signup Box -->
                <div class="card-back">
                    <h2>Create Account</h2>
                    <form>
                        <input type="text" class="input-box" placeholder="Name" required>
                        <input type="email" class="input-box" placeholder="Email" required>

                        <div class="password-box">
                            <input type="password" id="signup-pass" class="input-box" placeholder="Password" required>
                            <i class="fa-solid fa-eye toggle-pass" onclick="togglePassword('signup-pass', this)"></i>
                        </div>
                        <div id="strength-bar"></div>
                        <small id="strength-text"></small>

                        <button type="submit" class="submit-btn">Sign Up</button>
                    </form>
                    <button class="switch-btn" onclick="openLogin()">I've an Account</button>
                </div>

            </div>
        </div>
    </div>

    <script src="test.js"></script>
</body>
</html>

CSS Code

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    overflow: hidden;
}

/* Particle Canvas */
#particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Center Wrapper */
.wrapper {
    position: relative;
    width: 380px;
    height: 500px;
    perspective: 1200px;
}

/* Card Setup */
.card {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 238, 255, 0.6);
    transition: transform 0.8s;
    transform-style: preserve-3d;
    padding: 20px;
}

/* Inner Box */
.inner-box {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

/* Front & Back Faces */
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 30px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-front {
    transform: rotateY(0deg);
}

.card-back {
    transform: rotateY(180deg);
}

/* Flip Animation */
#card.flip .inner-box {
    transform: rotateY(180deg);
}

/* Headings */
h2 {
    font-size: 28px;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Inputs */
.input-box {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    outline: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: inset 0 0 10px rgba(0,238,255,0.5);
}

/* Password Box */
.password-box {
    position: relative;
    width: 100%;
}

.toggle-pass {
    position: absolute;
    top: 30%;
    right: 12px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.3s;
}

.toggle-pass:hover {
    color: #00eaff;
}

/* Buttons */
.submit-btn,
.switch-btn {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    border: none;
    background: linear-gradient(135deg, #00eaff, #0077ff);
    color: #fff;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 238, 255, 0.7);
}

.submit-btn:hover,
.switch-btn:hover {
    background: linear-gradient(135deg, #00ffae, #00eaff);
    box-shadow: 0 0 25px rgba(0, 238, 255, 1);
}

/* Forgot Password */
.forgot-link {
    margin-top: 10px;
    font-size: 13px;
    color: #00eaff;
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* Password Strength Bar */
#strength-bar {
    height: 6px;
    width: 100%;
    margin-top: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,0.2);
    transition: background 0.4s ease;
}

#strength-text {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    text-align: left;
    color: #ccc;
}

/* Responsive */
@media (max-width: 480px) {
    .wrapper {
        width: 90%;
        height: auto;
    }
}

Javascript Code

// Flip Animation
const card = document.getElementById("card");
function openSignup() { card.classList.add("flip"); }
function openLogin() { card.classList.remove("flip"); }

// Show / Hide Password
function togglePassword(id, el) {
    const input = document.getElementById(id);
    if (input.type === "password") {
        input.type = "text";
        el.classList.remove("fa-eye");
        el.classList.add("fa-eye-slash");
    } else {
        input.type = "password";
        el.classList.remove("fa-eye-slash");
        el.classList.add("fa-eye");
    }
}

// Password Strength Checker
const signupPass = document.getElementById("signup-pass");
const strengthBar = document.getElementById("strength-bar");
const strengthText = document.getElementById("strength-text");

signupPass?.addEventListener("input", () => {
    const val = signupPass.value;
    let strength = 0;

    if (val.match(/[a-z]+/)) strength++;
    if (val.match(/[A-Z]+/)) strength++;
    if (val.match(/[0-9]+/)) strength++;
    if (val.match(/[$@#&!]+/)) strength++;
    if (val.length >= 8) strength++;

    switch (strength) {
        case 0:
        case 1:
            strengthBar.style.background = "#ff4b5c";
            strengthText.innerText = "Weak Password";
            break;
        case 2:
        case 3:
            strengthBar.style.background = "#f8c10e";
            strengthText.innerText = "Medium Password";
            break;
        case 4:
        case 5:
            strengthBar.style.background = "#00ffae";
            strengthText.innerText = "Strong Password ✅";
            break;
    }
});

// Particle Background
const canvas = document.getElementById("particles");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particlesArray;

function init() {
    particlesArray = [];
    for (let i = 0; i < 120; i++) {
        particlesArray.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: Math.random() * 2,
            dx: (Math.random() - 0.5) * 1,
            dy: (Math.random() - 0.5) * 1
        });
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particlesArray.forEach(p => {
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        ctx.fillStyle = "#00eaff";
        ctx.fill();
        p.x += p.dx;
        p.y += p.dy;

        if (p.x < 0 || p.x > canvas.width) p.dx *= -1;
        if (p.y < 0 || p.y > canvas.height) p.dy *= -1;
    });
    requestAnimationFrame(animate);
}
init();
animate();
window.addEventListener("resize", () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    init();
});

🎬 Demo Video

✅ Conclusion

Is tarah aapne ek beautiful glowing login page banaya jo modern websites ke liye perfect hai. Aap ise customize karke colors, fonts aur animation apne hisaab se change kar sakte ho.

DigitalDeep

Login Page Animation Glow Effect – HTML CSS JavaScript

Login Page

✨ Features of This Login Page

📌 HTML Code

CSS Code

Javascript Code

🎬 Demo Video

✅ Conclusion

Post a Comment

स्वतंत्रता दिवस 2025: बनाएं अपना Digital ID Card

स्वतंत्रता दिवस 2025: बनाएं अपना Digital ID Card

DigitalDeep – लोगो डिज़ाइन, ऐप और वेबसाइट डेवलपमेंट सर्विसेज

DigitalDeep – प्रोफेशनल लोगो डिज़ाइन सर्विस सिर्फ WhatsApp पर

💡 DigitalDeep

#buttons=(Ok, Go it!) #days=(20)

Contact form

DigitalDeep

Login Page Animation Glow Effect – HTML CSS JavaScript

Login Page

✨ Features of This Login Page

📌 HTML Code

CSS Code

Javascript Code

🎬 Demo Video

✅ Conclusion

You Might Like

Post a Comment

💡 DigitalDeep

#buttons=(Ok, Go it!) #days=(20)

Contact form