WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML Login Form with Matrix Background
852
tanohangeaime99
Open In Editor
Publish Your Code
Recommended
20 June 2025
Apple Liquid Glass HTML CSS Effect
21 July 2024
Animated Sign In Form
24 September 2025
CSS Brain Animation HTML Snippet
HTML
Copy
Andev Web
Login
Username
Password
Forgot Password
Register
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); * html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Quicksand', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } section { position: absolute; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; gap: 2px; flex-wrap: wrap; overflow: hidden; } @keyframes animate { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } section span { position: relative; display: block; width: calc(6.25vw - 2px); height: calc(6.25vw - 2px); background: #181818; z-index: 2; transition: 1.5s; } section span:hover { background: #0f0; transition: 0s; } section .signin { position: absolute; width: 400px; background: #222; z-index: 1000; display: flex; justify-content: center; align-items: center; padding: 40px; border-radius: 4px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9); } section .signin .content { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 40px; } section .signin .content h2 { font-size: 2em; color: #0f0; text-transform: uppercase; } section .signin .content .form { width: 100%; display: flex; flex-direction: column; gap: 25px; } section .signin .content .form .inputBox { position: relative; width: 100%; } section .signin .content .form .inputBox input { position: relative; width: 100%; background: #333; border: none; outline: none; padding: 25px 10px 7.5px; border-radius: 4px; color: #fff; font-weight: 500; font-size: 1em; } section .signin .content .form .inputBox i { position: absolute; left: 0; padding: 15px 10px; font-style: normal; color: #aaa; transition: 0.5s; pointer-events: none; } .signin .content .form .inputBox input:focus ~ i, .signin .content .form .inputBox input:valid ~ i { transform: translateY(-7.5px); font-size: 0.8em; color: #fff; } .signin .content .form .links { position: relative; width: 100%; display: flex; justify-content: space-between; } .signin .content .form .links a { color: #fff; text-decoration: none; } .signin .content .form .links a:nth-child(2) { color: #0f0; font-weight: 600; } .signin .content .form .inputBox input[type="submit"] { padding: 10px; background: #0f0; color: #000; font-weight: 600; font-size: 1.35em; letter-spacing: 0.05em; cursor: pointer; } input[type="submit"]:active { opacity: 0.6; } @media (max-width: 900px) { section span { width: calc(10vw - 2px); height: calc(10vw - 2px); } } @media (max-width: 600px) { section span { width: calc(20vw - 2px); height: calc(20vw - 2px); } }
JS
Copy
const canvas = document.getElementById('matrixCanvas'); const ctx = canvas.getContext('2d'); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); const matrixChars = '404 ERROR'; const fontSize = 16; const columns = canvas.width / fontSize; const drops = Array.from({ length: columns }).fill(1); function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0f0'; ctx.font = `${fontSize}px monospace`; drops.forEach((y, i) => { const text = matrixChars[Math.floor(Math.random() * matrixChars.length)]; const x = i * fontSize; ctx.fillText(text, x, y * fontSize); if (y * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; }); } setInterval(draw, 50);