Step into the future of UI design with this retro-futuristic cyberpunk login terminal! In this tutorial, we’ll build a stunning HTML & CSS login screen styled with neon green and purple hues, glitch animations, matrix-inspired typography, and a sleek dark background. Perfect for developers looking to experiment with visual storytelling, this project blends nostalgic 80s sci-fi with modern CSS magic. Learn how to layer effects, use custom fonts, and animate your way into a hacker-style aesthetic that feels straight out of a dystopian world.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cyberpunk Login Terminal</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom font for a retro-futuristic terminal look */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
body {
font-family: 'VT323', monospace;
background: #0a0a0a; /* Very dark background */
color: #00ff00; /* Neon green text */
overflow: hidden; /* Prevent scrollbars from glitch effect */
}
/* Glitch effect keyframes */
@keyframes glitch {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
/* Scanline effect for the terminal window */
.scanlines::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 1px,
rgba(0, 255, 0, 0.05) 1px,
rgba(0, 255, 0, 0.05) 2px
);
pointer-events: none; /* Allows interaction with elements below */
z-index: 10;
}
/* Terminal window styling */
.terminal-window {
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
border: 2px solid #00ff00; /* Neon green border */
box-shadow: 0 0 15px #00ff00, 0 0 30px #8a2be2; /* Neon green and purple glow */
position: relative;
overflow: hidden; /* Ensures scanlines stay within bounds */
}
/* Input field styling */
input {
background-color: #1a1a1a !important; /* Darker input background */
border: 1px solid #00ff00 !important; /* Neon green border */
color: #00ff00 !important; /* Neon green text */
box-shadow: 0 0 5px #00ff00; /* Subtle glow */
padding: 0.75rem 1rem; /* Adjust padding for better look with VT323 */
}
input::placeholder {
color: #008800 !important; /* Darker neon green placeholder */
}
input:focus {
border-color: #8a2be2 !important; /* Purple on focus */
box-shadow: 0 0 8px #8a2be2, 0 0 15px #8a2be2 !important; /* Purple glow on focus */
}
/* Button styling */
button {
background-color: #8a2be2 !important; /* Purple button */
color: #00ff00 !important; /* Neon green text on button */
box-shadow: 0 0 10px #8a2be2; /* Purple glow */
transition: all 0.2s ease-in-out;
}
button:hover {
background-color: #9932cc !important; /* Darker purple on hover */
box-shadow: 0 0 15px #8a2be2, 0 0 25px #8a2be2 !important; /* Stronger purple glow */
animation: glitch 0.3s infinite; /* Glitch on hover */
}
/* Link colors */
a {
color: #8a2be2 !important; /* Purple links */
text-shadow: 0 0 5px #8a2be2; /* Purple glow for links */
}
a:hover {
color: #00ff00 !important; /* Neon green on hover */
text-shadow: 0 0 5px #00ff00; /* Neon green glow on hover */
}
/* Animation for initial entry */
@keyframes terminalEntry {
from {
opacity: 0;
transform: scale(0.95);
filter: blur(5px);
}
to {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
}
.animate-terminal-entry {
animation: terminalEntry 1s ease-out forwards;
}
/* Neon text shadow for headings */
.text-shadow-neon {
text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #8a2be2;
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen p-4">
<div class="terminal-window p-8 rounded-lg w-full max-w-md animate-terminal-entry scanlines">
<h2 class="text-4xl font-bold text-center mb-8 tracking-wider text-shadow-neon">SYSTEM LOGIN // ACCESS REQUIRED</h2>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-bold mb-2">USER IDENTIFIER:</label>
<input
type="text"
id="email"
name="email"
placeholder="ENTER_USERNAME_OR_EMAIL"
class="w-full px-4 py-3 border rounded-md focus:outline-none transition duration-300 ease-in-out"
required
>
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-bold mb-2">AUTHORIZATION KEY:</label>
<input
type="password"
id="password"
name="password"
placeholder="ENTER_PASSWORD"
class="w-full px-4 py-3 border rounded-md focus:outline-none transition duration-300 ease-in-out"
required
>
</div>
<button
type="submit"
class="w-full py-3 rounded-md font-bold text-xl focus:outline-none transition duration-300 ease-in-out transform hover:scale-105"
>
INITIATE PROTOCOL // LOGIN
</button>
</form>
<div class="mt-8 text-center text-sm">
<a href="#" class="hover:underline font-bold">FORGOT KEY? // RECOVER ACCESS</a>
<p class="mt-3">NEW USER? <a href="#" class="hover:underline font-bold">// REGISTER NEW IDENTITY</a></p>
</div>
</div>
</body>
</html>
