If you’re looking for a modern and futuristic login page that gives your website a cyber or hacker-style vibe, this design is perfect for you. Built using only HTML, CSS, and JavaScript, this login page features a green pixel-grid animation in the background, creating a sleek and professional tech look.
💻 Project Overview
This animated login page uses a glowing grid animation with a smooth neon-green color palette — often seen in hacker-themed or dark UI designs. The login form floats beautifully in the center with a glass-style background, adding depth and a futuristic touch.
Technologies Used:
- HTML5 – For creating the structure of the login form.
- CSS3 – For styling, animations, and hover effects.
- JavaScript – For background grid animation and interactivity.
⚙️ Features
✅ Responsive Design – Works perfectly on mobile, tablet, and desktop.
✅ Animated Background – A live, moving pixel grid for a hacker-style effect.
✅ Neon Green Theme – Gives a futuristic “matrix” or “hacker terminal” feel.
✅ Simple & Lightweight – Built with pure HTML, CSS, and JS (no libraries).
✅ User-Friendly – Easy to integrate into any web project or admin dashboard.
🧩 How It Works
- The HTML creates a structured form containing input boxes for username and password.
- The CSS defines the overall dark theme, glowing green highlights, and button animations.
- The JavaScript dynamically animates the background grid, making it appear alive and interactive.
This combination results in a minimal yet eye-catching login interface that stands out from traditional web forms.
🚀 How to Use
- Copy the HTML, CSS, and JS files into your project folder.
- Link the CSS and JS files correctly in your HTML
<head>and before</body>. - Open your file in a browser — and your hacker-style login page is ready to use!
🌐 Use Cases
You can use this login page in:
- Admin panels
- Portfolio websites
- Cyber security or tech blogs
- Gaming portals
- Developer dashboards
Sign In — Neon Grid SIGN IN
:root {
--bg:#2a2a36;
--panel:#222425;
--muted:#8b8b8b;
--neon:#fe7f2d;
}
html, body {
height: 100%;
margin: 0;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
background: linear-gradient(180deg,#252533 0%, #1f1e25 100%);
color: #e6e6e6;
}
section.signin {
min-height: 100vh;
display: grid;
place-items: center;
position: relative;
padding: 40px;
}
.grid-wrap {
position: absolute;
inset: 30px;
border-radius: 8px;
padding: 18px;
border: 4px solid rgba(255,255,255,0.06);
background: linear-gradient(180deg,#232226 0%, rgba(0,0,0,0.2) 60%);
box-shadow: 0 8px 30px rgba(0,0,0,0.6);
overflow: hidden;
}
.grid-canvas {
width: 100%;
height: 60vh;
border-radius: 6px;
background: transparent;
}
.content {
position: relative;
z-index: 40;
width: 320px;
max-width: 90%;
transform: translateY(-6vh);
}
.card {
background: linear-gradient(180deg, rgba(20,20,20,0.98), rgba(10,10,10,0.95));
border-radius: 6px;
padding: 20px;
box-shadow: 0 12px 40px rgba(0,0,0,0.6);
text-align: center;
border: 1px solid rgba(255,255,255,0.03);
}
.card h2 {
margin: 0 0 14px 0;
color: var(--neon);
letter-spacing: 1px;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
}
.inputBox {
position: relative;
margin: 14px 0;
}
.inputBox input[type="text"],
.inputBox input[type="password"] {
width: 100%;
padding: 12px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.03);
color: #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color .18s, box-shadow .18s;
}
.inputBox i {
position: absolute;
left: 12px;
top: 12px;
color: var(--muted);
font-style: normal;
transition: all .18s ease;
}
.inputBox input:focus + i,
.inputBox input.has-val + i {
top: -8px;
left: 8px;
font-size: 11px;
color: var(--neon);
background: rgba(20,20,20,0.9);
padding: 0 6px;
border-radius: 3px;
}
.links {
display: flex;
justify-content: space-between;
margin: 8px 0 12px;
}
.links a {
color: var(--muted);
text-decoration: none;
font-size: 13px;
}
.links a:hover {
color: var(--neon);
}
.btn {
width: 100%;
padding: 10px 12px;
border-radius: 4px;
font-weight: 700;
border: 0;
cursor: pointer;
font-size: 14px;
background: linear-gradient(180deg, #fe7f2d, #fe7f2d);
color: #062206;
transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover {
box-shadow: 0 10px 26px rgba(34,220,34,0.18);
}
@media (max-width:520px) {
.grid-canvas { height: 48vh; }
.content { width: 92%; }
}
document.querySelectorAll('.inputBox input').forEach(inp => {
inp.addEventListener('focus', () => inp.classList.add('has-val'));
inp.addEventListener('blur', () => {
if (!inp.value) inp.classList.remove('has-val');
});
if (inp.value) inp.classList.add('has-val');
});
// Demo form submit
document.getElementById('loginForm').addEventListener('submit', e => {
e.preventDefault();
const btn = document.getElementById('loginBtn');
btn.value = 'Signing...';
btn.disabled = true;
setTimeout(() => {
btn.value = 'Login';
btn.disabled = false;
alert('Demo: Login submitted!');
}, 800);
});
// Animated grid background
const canvas = document.getElementById('gridCanvas');
const ctx = canvas.getContext('2d');
let W, H, cols, rows;
const cellSize = 24, gap = 2;
const snake = [];
const maxSnakeLen = 12;
function resize() {
const rect = canvas.getBoundingClientRect();
W = rect.width; H = rect.height;
canvas.width = W * devicePixelRatio;
canvas.height = H * devicePixelRatio;
ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
cols = Math.floor(W / (cellSize + gap));
rows = Math.floor(H / (cellSize + gap));
snake.length = 0;
const sx = Math.floor(cols * 0.05);
const sy = rows - 3;
for (let i = 0; i < 6; i++) snake.push({ x: sx + i, y: sy });
}
function drawGrid() {
ctx.clearRect(0, 0, W, H);
ctx.strokeStyle = 'rgba(34, 34, 34, 0.6)';
ctx.lineWidth = 1;
for (let c = 0; c <= cols; c++) {
const x = c * (cellSize + gap);
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, H);
ctx.stroke();
}
for (let r = 0; r <= rows; r++) {
const y = r * (cellSize + gap);
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(W, y);
ctx.stroke();
}
}
function drawSnake() {
snake.forEach((s, i) => {
const x = s.x * (cellSize + gap);
const y = s.y * (cellSize + gap);
const t = 1 - (i / snake.length);
const alpha = 0.4 + t * 0.9;
ctx.fillStyle = `rgba(80,255,80,${alpha})`;
ctx.fillRect(x, y, cellSize, cellSize);
});
}
function stepSnake() {
const head = snake[snake.length - 1];
const dirs = [{dx:1,dy:0},{dx:-1,dy:0},{dx:0,dy:1},{dx:0,dy:-1}];
const d = dirs[Math.floor(Math.random()*dirs.length)];
const nx = (head.x + d.dx + cols) % cols;
const ny = (head.y + d.dy + rows) % rows;
snake.push({x:nx, y:ny});
if (snake.length > maxSnakeLen) snake.shift();
}
function loop() {
drawGrid();
stepSnake();
drawSnake();
requestAnimationFrame(loop);
}
window.addEventListener('resize', resize);
resize();
loop();
🔮 Final Thoughts
The Hacker-Style Animated Login Page is more than just a form — it’s an experience. The combination of animation, neon green glow, and dark theme delivers an immersive “tech” aesthetic that instantly attracts attention.
If you want to add a professional and futuristic vibe to your website, this is the perfect login page to start with.
0 Comments