Webleb - UI Elements - Modern Login Form

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

Modern Login Form

Recommended

Glowing Gradient Glassmorphism Card

Recording Toggle

Responsive Image Slider

HTML

CSS

JS

Recommended

Glowing Gradient Glassmorphism Card

Recording Toggle

Responsive Image Slider

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS