Webleb - fragmentos de código - Formulario de inicio de sesión moderno con degradado, brillo animado y diseño adaptable

HTML

CSS

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;
}

Formulario de inicio de sesión moderno con degradado, brillo animado y diseño adaptable

Recomendado

Formulario de inicio de sesión animado

Un código de bachir123

Un código de yefersonsotohenao

HTML

CSS

JS

Recomendado

Formulario de inicio de sesión animado

Un código de bachir123

Un código de yefersonsotohenao

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS