Cyberpunk Login Form HTML Template

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyberpunk Login</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scene">
        <div class="login-card">
            <div class="card-header">
                <h1 class="glitch" data-text="SYSTEM_ACCESS">SYSTEM_ACCESS</h1>
            </div>
            <form class="login-form">
                <div class="input-group">
                    <input type="text" required id="username" autocomplete="off">
                    <label for="username">IDENTITY</label>
                    <div class="bar"></div>
                </div>
                <div class="input-group">
                    <input type="password" required id="password" autocomplete="off">
                    <label for="password">PASSPHRASE</label>
                    <div class="bar"></div>
                </div>
                <button type="submit" class="cyber-btn">
                    <span class="btn-content">INITIALIZE_LINK</span>
                    <span class="glitch-effect"></span>
                </button>
            </form>
            <div class="card-footer">
                <p>SECURE CONNECTION: <span class="status">ESTABLISHED</span></p>
            </div>
        </div>
        <div class="particles"></div>
    </div>
</body>
</html>

CSS

:root {
    --neon-cyan: #00f3ff;
    --neon-pink: #ff00ff;
    --dark-bg: #050505;
    --card-bg: rgba(10, 10, 10, 0.6);
    --text-main: #e0e0e0;
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
}

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

body {
    background-color: var(--dark-bg);
    color: var(--text-main);
    font-family: var(--font-body);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: 
        radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 100%),
        linear-gradient(0deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    perspective: 1000px;
}

.scene {
    transform-style: preserve-3d;
    animation: float 6s ease-in-out infinite;
}

.login-card {
    position: relative;
    width: 380px;
    padding: 40px;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 243, 255, 0.2);
    box-shadow: 
        0 0 20px rgba(0, 243, 255, 0.1),
        inset 0 0 20px rgba(0, 243, 255, 0.05);
    transform: rotateX(5deg) rotateY(5deg);
    transition: transform 0.3s ease;
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% 85%, 
        90% 100%, 
        0 100%
    );
}

.login-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--neon-cyan), transparent, var(--neon-pink));
    z-index: -1;
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% 85%, 
        90% 100%, 
        0 100%
    );
    opacity: 0.3;
}

.login-card:hover {
    transform: rotateX(0deg) rotateY(0deg) scale(1.02);
    box-shadow: 
        0 0 30px rgba(0, 243, 255, 0.2),
        inset 0 0 30px rgba(0, 243, 255, 0.1);
}

.card-header {
    text-align: center;
    margin-bottom: 40px;
}

h1.glitch {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--neon-cyan);
    position: relative;
    text-shadow: 2px 2px var(--neon-pink);
}

h1.glitch::before, h1.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-bg);
}

h1.glitch::before {
    left: 2px;
    text-shadow: -1px 0 var(--neon-pink);
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

h1.glitch::after {
    left: -2px;
    text-shadow: -1px 0 var(--neon-cyan);
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

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

input {
    width: 100%;
    padding: 10px 0;
    font-size: 1.1rem;
    color: var(--text-main);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    outline: none;
    font-family: var(--font-body);
    letter-spacing: 1px;
    transition: 0.3s;
}

label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transition: 0.3s;
    font-family: var(--font-display);
    font-size: 0.8rem;
}

input:focus ~ label,
input:valid ~ label {
    top: -20px;
    color: var(--neon-cyan);
    font-size: 0.7rem;
}

.bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--neon-cyan);
    transition: 0.3s;
    box-shadow: 0 0 10px var(--neon-cyan);
}

input:focus ~ .bar,
input:valid ~ .bar {
    width: 100%;
}

.cyber-btn {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: var(--font-display);
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
}

.cyber-btn:hover {
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
    text-shadow: 0 0 5px var(--neon-cyan);
}

.cyber-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent);
    transition: 0.5s;
}

.cyber-btn:hover::before {
    left: 100%;
}

.card-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.status {
    color: var(--neon-pink);
    animation: blink 2s infinite;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0) rotateX(5deg) rotateY(5deg); }
    50% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes glitch-anim {
    0% { clip: rect(30px, 9999px, 10px, 0); }
    20% { clip: rect(80px, 9999px, 90px, 0); }
    40% { clip: rect(10px, 9999px, 50px, 0); }
    60% { clip: rect(60px, 9999px, 20px, 0); }
    80% { clip: rect(20px, 9999px, 70px, 0); }
    100% { clip: rect(90px, 9999px, 30px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(60px, 9999px, 20px, 0); }
    20% { clip: rect(10px, 9999px, 50px, 0); }
    40% { clip: rect(90px, 9999px, 30px, 0); }
    60% { clip: rect(30px, 9999px, 10px, 0); }
    80% { clip: rect(70px, 9999px, 20px, 0); }
    100% { clip: rect(20px, 9999px, 80px, 0); }
}

/* Responsive */
@media (max-width: 480px) {
    .login-card {
        width: 90%;
        margin: 20px;
    }
}

Cyberpunk Login Form HTML Template

Recommended

Login Register Form HTML CSS Biometric Auth

Image Slider HTML CSS JavaScript

HTML CSS Navbar Code

HTML

CSS

JS

Recommended

Login Register Form HTML CSS Biometric Auth

Image Slider HTML CSS JavaScript

HTML CSS Navbar Code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS