ग्रेडिएंट, एनिमेटेड ग्लो और रिस्पॉन्सिव डिज़ाइन के साथ आधुनिक लॉगिन फ़ॉर्म

अनुशंसित

5 August 2024

body {
    min-height: 100vh;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    background: linear-gradient(135deg, #ffffffcc 0%, #f3f3f3cc 100%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    border-radius: 20px;
    padding: 40px 24px; /* etwas weniger Padding */
    width: 350px;
    backdrop-filter: blur(4px);
}

h2 {
    text-align: center;
    margin-bottom: 24px;
    margin-top: 5px; /* Abstand nach oben */
    color: #2575fc;
    letter-spacing: 1px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
}

.input-group {
    margin-bottom: 18px;
    position: relative;
}

.input-group label {
    display: block;
    text-align: center;
    font-size: 1.08rem;
    font-weight: 500;
    color: #2575fc;
    margin-bottom: 10px; /* mehr Abstand zum Eingabefeld */
    margin-top: 0;
    letter-spacing: 0.5px;
}

.input-group input[type="text"],
.input-group input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px; /* Icon-Padding entfernt */
    border: none;
    border-radius: 12px;
    
    font-size: 1.05rem;
    margin-bottom: 2px;
    box-shadow: 0 4px 18px rgba(80, 120, 200, 0.13), 0 1.5px 0 #fff inset;
    transition: 
        background 0.2s, 
        box-shadow 0.2s, 
        border 0.2s,
        filter 0.5s;
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
}

.input-group input[type="text"]:focus,
.input-group input[type="password"]:focus {
    background: linear-gradient(90deg, #e3eafc 0%, #d0d8f6 100%);
    outline: none;
    border: 2px solid #6a11cb;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.7), 0 6px 24px rgba(80, 120, 200, 0.22), 0 1.5px 0 #fff inset;
    filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #fff);
    animation: glow-move 1.2s linear infinite;
}

@keyframes glow-move {
    0% {
        box-shadow: 0 0 0 4px rgba(255,255,255,0.7), 0 6px 24px rgba(80, 120, 200, 0.22), 0 1.5px 0 #fff inset;
        filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #fff);
    }
    50% {
        box-shadow: 0 0 12px 8px rgba(255,255,255,0.9), 0 6px 24px rgba(80, 120, 200, 0.22), 0 1.5px 0 #fff inset;
        filter: drop-shadow(0 0 16px #fff) drop-shadow(0 0 32px #fff);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(255,255,255,0.7), 0 6px 24px rgba(80, 120, 200, 0.22), 0 1.5px 0 #fff inset;
        filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #fff);
    }
}

button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 18px; /* Abstand wie bei .input-group */
    box-shadow: 0 2px 8px rgba(80, 120, 200, 0.13);
    transition: background 0.2s, transform 0.1s;
}

button[type="submit"]:hover {
    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
    transform: translateY(-2px) scale(1.02);
}

#message {
    margin-top: 16px;
    text-align: center;
    color: #e74c3c;
    font-size: 1rem;
    min-height: 22px;
}

ग्रेडिएंट, एनिमेटेड ग्लो और रिस्पॉन्सिव डिज़ाइन के साथ आधुनिक लॉगिन फ़ॉर्म

अनुशंसित

एनिमेशन के साथ सूची

मैट्रिक्स एनिमेटेड पृष्ठभूमि

HTML CSS लॉगिन फॉर्म कोड

HTML

CSS

JS

अनुशंसित

एनिमेशन के साथ सूची

मैट्रिक्स एनिमेटेड पृष्ठभूमि

HTML CSS लॉगिन फॉर्म कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS