Hacker-Style Animated Login Page Using HTML, CSS, and JavaScript

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

HTML Code



  Sign In — Neon Grid
  




  
  
    
  

  
  
    
      SIGN IN
      
        
          
          Username
        

        
          
          Password
        

        
          Forgot Password
          Signup

CSS Code

: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%; }
}

JavaScript Code

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.