Webleb - Snippets de Código - Formulário de login moderno com gradiente, brilho animado e design responsivo

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

Formulário de login moderno com gradiente, brilho animado e design responsivo

Recomendado

Formulário de Login Panda

Texto para arquivo

Página de destino do desenvolvedor HTML CSS

HTML

CSS

JS

Recomendado

Formulário de Login Panda

Texto para arquivo

Página de destino do desenvolvedor HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS