Webleb - UI Elements - HTML Login Form with Geometric Background

HTML

<body>
    
    <div class="geometric-shapes">
        <div class="shape hexagon"></div>
        <div class="shape triangle"></div>
        <div class="shape diamond"></div>
        <div class="shape hexagon"></div>
        <div class="shape triangle"></div>
        <div class="shape diamond"></div>
    </div>
    
    
    <div class="wave-container">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
    </div>
    
    
    <div class="minimal-particles">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
    
    
    <div class="subtle-lines">
        <div class="line"></div>
        <div class="line"></div>
    </div>
    
    
    <div class="soft-circles">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    
    
    <div class="login-container">
        <div class="login-box">
            <h2 class="login-title">Fazer Login</h2>
            <form>
                <div class="form-group">
                    <label class="form-label" for="email">Email</label>
                    <input class="form-input" type="email" id="email" placeholder="Digite seu email">
                </div>
                <div class="form-group">
                    <label class="form-label" for="password">Senha</label>
                    <input class="form-input" type="password" id="password" placeholder="Digite sua senha">
                </div>
                <button class="login-button" type="submit">Entrar</button>
                <div class="forgot-password">
                    <a href="#">Esqueceu sua senha?</a>
                </div>
            </form>
        </div>
    </div>
</body>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(135deg, 
                #f0f9ff 0%, 
                #e0f2fe 30%, 
                #bae6fd 60%, 
                #7dd3fc 100%
            );
            position: relative;
        }

/* Formas geométricas flutuantes */
        .geometric-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
        }

.shape {
            position: absolute;
            opacity: 0.6;
            animation: floatSmooth 12s ease-in-out infinite;
        }

/* Hexágonos */
        .hexagon {
            width: 60px;
            height: 34px;
            background: rgba(56, 189, 248, 0.3);
            position: relative;
        }
.hexagon:before,

.hexagon:after {

content: "";

position: absolute;

width: 0;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

}

.hexagon:before {

bottom: 100%;

border-bottom: 17px solid rgba(56, 189, 248, 0.3);

}

.hexagon:after {

top: 100%;

border-top: 17px solid rgba(56, 189, 248, 0.3);

}

/* Triângulos */

.triangle {

width: 0;

height: 0;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

border-bottom: 43px solid rgba(14, 165, 233, 0.4);

}
.shape:nth-child(4) {

top: 10%;

right: 30%;

animation-delay: -2s;

}

.shape:nth-child(5) {

bottom: 20%;

right: 40%;

animation-delay: -6s;

}

.shape:nth-child(6) {

top: 70%;

left: 70%;

animation-delay: -10s;

}

@keyframes floatSmooth {

0%, 100% {

transform: translateY(0px) rotate(0deg);

opacity: 0.6;

}

33% {

transform: translateY(-20px) rotate(120deg);

opacity: 0.8;

}

66% {

transform: translateY(10px) rotate(240deg);

opacity: 0.4;

}

}
.wave {

position: absolute;

bottom: 0;

left: 0;

width: 200%;

height: 100px;

background: linear-gradient(90deg,

transparent,

rgba(56, 189, 248, 0.1),

rgba(14, 165, 233, 0.2),

rgba(56, 189, 248, 0.1),

transparent

);

border-radius: 100px;

animation: gentleWave 15s ease-in-out infinite;

}

.wave:nth-child(2) {

animation-delay: -5s;

opacity: 0.7;

}

.wave:nth-child(3) {

animation-delay: -10s;

opacity: 0.5;

}

@keyframes gentleWave {

0%, 100% {

transform: translateX(-50%) translateY(0px);

}

50% {

transform: translateX(-50%) translateY(-10px);

}

/* Partículas mínimas */

.minimal-particles {

position: absolute;

width: 100%;

height: 100%;

}

.dot {

position: absolute;

width: 4px;

height: 4px;

background: rgba(14, 165, 233, 0.6);

border-radius: 50%;

animation: gentleFloat 20s linear infinite;

}
.dot:nth-child(1) { left: 20%; animation-delay: 0s; }

.dot:nth-child(2) { left: 40%; animation-delay: -5s; }

.dot:nth-child(3) { left: 60%; animation-delay: -10s; }

.dot:nth-child(4) { left: 80%; animation-delay: -15s; }

@keyframes gentleFloat {

0% {

transform: translateY(100vh);

opacity: 0;

}

10%, 90% {

opacity: 1;

}

100% {

transform: translateY(-10vh);

opacity: 0;

}

}
/* Linhas sutis */

.subtle-lines {

position: absolute;

width: 100%;

height: 100%;

}

.line {

position: absolute;

height: 1px;

background: linear-gradient(90deg,

transparent,

rgba(56, 189, 248, 0.3),

transparent

);

animation: subtleGlow 8s ease-in-out infinite;

}

.line:nth-child(1) {

width: 200px;

top: 25%;

left: 15%;

transform: rotate(30deg);

}

.line:nth-child(2) {

width: 150px;

bottom: 35%;

right: 20%;

transform: rotate(-45deg);

animation-delay: -4s;

}
@keyframes subtleGlow {

0%, 100% {

opacity: 0.2;

transform: scale(1);

}

50% {

opacity: 0.6;

transform: scale(1.1);

}

/* Círculos suaves */

.soft-circles {

position: absolute;

width: 100%;

height: 100%;

}
.circle {

position: absolute;

border: 1px solid rgba(56, 189, 248, 0.3);

border-radius: 50%;

animation: breathe 10s ease-in-out infinite;

}

.circle:nth-child(1) {

width: 120px;

height: 120px;

top: 15%;

right: 25%;

}

.circle:nth-child(2) {

width: 80px;

height: 80px;

bottom: 25%;

left: 20%;

animation-delay: -5s;

}
@keyframes breathe {

0%, 100% {

transform: scale(1);

opacity: 0.4;

}

50% {

transform: scale(1.1);

opacity: 0.7;

}

/* Container de Login */

.login-container {

position: relative;

z-index: 10;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

.login-box {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

border-radius: 16px;

padding: 2.5rem;

width: 400px;

box-shadow:

0 20px 40px rgba(14, 165, 233, 0.15),

0 8px 16px rgba(14, 165, 233, 0.1),

inset 0 1px 0 rgba(255, 255, 255, 0.8);

border: 1px solid rgba(56, 189, 248, 0.2);

transition: transform 0.3s ease;

}

.login-box:hover {

transform: translateY(-2px);

box-shadow:

0 25px 50px rgba(14, 165, 233, 0.2),

0 12px 24px rgba(14, 165, 233, 0.15),

inset 0 1px 0 rgba(255, 255, 255, 0.8);

}
.login-title {

text-align: center;

color: #0c4a6e;

font-size: 1.8rem;

font-weight: 600;

margin-bottom: 2rem;

font-family: 'Arial', sans-serif;

}

.form-group {

margin-bottom: 1.5rem;

}

.form-label {

display: block;

color: #075985;

font-size: 0.9rem;

font-weight: 500;

margin-bottom: 0.5rem;

}
.form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid rgba(56, 189, 248, 0.3);
            border-radius: 8px;
            font-size: 1rem;
            background: rgba(240, 249, 255, 0.8);
            color: #0c4a6e;
            transition: all 0.3s ease;
            box-shadow: 
                inset 2px 2px 4px rgba(14, 165, 233, 0.1),
                inset -2px -2px 4px rgba(255, 255, 255, 0.8);
        }

.form-input:focus {
            outline: none;
            border-color: #0ea5e9;
            background: rgba(240, 249, 255, 1);
            box-shadow: 
                0 0 0 3px rgba(14, 165, 233, 0.1),
                inset 2px 2px 6px rgba(14, 165, 233, 0.15),
                inset -2px -2px 6px rgba(255, 255, 255, 0.9);
            transform: translateY(-1px);
        }
.login-button {

width: 100%;

padding: 0.875rem;

background: linear-gradient(135deg, #0ea5e9, #0284c7);

color: white;

border: none;

border-radius: 8px;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

transition: all 0.2s ease;

box-shadow:

0 6px 12px rgba(14, 165, 233, 0.3),

0 2px 4px rgba(14, 165, 233, 0.2),

inset 0 1px 0 rgba(255, 255, 255, 0.2);

margin-top: 0.5rem;

}

.login-button:hover {

background: linear-gradient(135deg, #0284c7, #0369a1);

transform: translateY(-2px);

box-shadow:

0 8px 16px rgba(14, 165, 233, 0.4),

0 4px 8px rgba(14, 165, 233, 0.3),

inset 0 1px 0 rgba(255, 255, 255, 0.2);

}
.login-button:active {

transform: translateY(0px);

box-shadow:

0 2px 4px rgba(14, 165, 233, 0.3),

0 1px 2px rgba(14, 165, 233, 0.2),

inset 0 2px 4px rgba(0, 0, 0, 0.1);

}

.forgot-password {

text-align: center;

margin-top: 1.5rem;

}

.forgot-password a {

color: #0ea5e9;

text-decoration: none;

font-size: 0.9rem;

transition: color 0.3s ease;

}
.forgot-password a:hover {

color: #0284c7;

text-decoration: underline;

}

HTML Login Form with Geometric Background

Recommended

Simple HTML Login Form

CSS Login Form

Simple Login Form

HTML

CSS

JS

Recommended

Simple HTML Login Form

CSS Login Form

Simple Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS