WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Cyberpunk Login Form HTML Template
564
codex
Open In Editor
Publish Your Code
Recommended
19 November 2025
Login Register Form HTML CSS Biometric Auth
12 September 2025
Image Slider HTML CSS JavaScript
19 October 2024
HTML CSS Navbar Code
HTML
Copy
Cyberpunk Login
SYSTEM_ACCESS
IDENTITY
PASSPHRASE
INITIALIZE_LINK
CSS
Copy
: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; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */