Futuristic Login Form HTML CSS: Building the ‘Infinity Portal’ (Free Source Code)
Let’s be honest for a second—99% of the login pages we see every day are boring. It’s usually just a white box, two input fields, and a generic blue button. As a developer, I’ve always asked myself, “Why does it have to be this way?”
That question kept bugging me. So, last weekend, I decided to break the rules. I wanted to build a Futuristic Login Form HTML CSS project that didn’t look like a standard website. I wanted it to look like a terminal on a spaceship or a portal to another dimension.
After hours of tweaking the JavaScript particle system and playing with CSS 3D transforms, I finally created what I call “The Infinity Portal.”
In this post, I will share the complete source code so you can use this futuristic login form HTML CSS snippet in your own projects.
Why This Design is Special
I didn’t just want a pretty picture in the background. I wanted interaction. Here is what makes this design unique:
- An Interactive Universe: The background isn’t a video. It’s a live HTML5 Canvas simulation. Thousands of stars float around, and if you move your mouse, they connect to form constellations.
- Holographic 3D Tilt: The login card itself reacts to your movement. Using a specific JavaScript calculation, the card tilts left and right as you move your cursor, creating a stunning 3D glass effect.
- Neon Cyberpunk Aesthetics: I used a “Cyan” neon color palette with glowing borders to give it that high-tech vibe.
Live Demo
Words can’t do it justice. You have to move your mouse around to really feel the 3D effect of this futuristic login form.
👉 Click here to View the Live Demo on CodePen
Get the Source Code
If you are ready to build this futuristic login form HTML CSS project, follow the steps below. You don’t need any external libraries like Three.js or jQuery. It is pure Vanilla JavaScript.
You will need to create three files: index.html, style.css, and script.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinity Portal Login</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="universe"></canvas>
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="container-3d" id="tiltContainer">
<div class="login-card" id="tiltCard">
<div class="content">
<h2>INFINITY</h2>
<p class="subtitle">ACCESS THE FUTURE</p>
<form>
<div class="input-group">
<input type="text" required autocomplete="off">
<label>Identity Code</label>
<i class="fas fa-user-astronaut"></i>
</div>
<div class="input-group">
<input type="password" required>
<label>Access Key</label>
<i class="fas fa-fingerprint"></i>
</div>
<button type="submit" class="btn-glow">Initialize</button>
<div class="footer-links">
<a href="#">Recover Key</a>
<a href="#">New Entity?</a>
</div>
</form>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. The CSS Styling Here is where the visual magic happens. To achieve that futuristic login form HTML CSS look, I used the Orbitron font for an alien/space aesthetic and backdrop-filter for the glassmorphism effect.
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@300;500;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
overflow: hidden;
background: #000;
font-family: 'Rajdhani', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* --- Canvas Background --- */
#universe {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%; z-index: 0;
background: radial-gradient(circle at center, #1a0b2e 0%, #000000 100%);
}
/* --- 3D Container & Card --- */
.container-3d {
position: relative; z-index: 10; perspective: 1000px;
}
.login-card {
width: 420px; padding: 60px 40px;
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.05);
transform-style: preserve-3d;
transition: transform 0.1s ease;
position: relative; overflow: hidden;
}
/* Glowing Border Animation */
.login-card::before {
content: ''; position: absolute; top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);
transition: 0.5s; transform: skewX(-25deg); pointer-events: none;
}
.login-card:hover::before { left: 100%; transition: 0.7s; }
.content { transform: translateZ(60px); }
/* Typography */
h2 {
color: #fff; font-family: 'Orbitron', sans-serif; font-size: 2.2rem;
text-align: center; margin-bottom: 10px; letter-spacing: 3px;
text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}
p.subtitle {
color: rgba(0, 255, 255, 0.7); text-align: center; margin-bottom: 40px;
font-size: 0.9rem; letter-spacing: 1px;
}
/* Inputs */
.input-group { position: relative; margin-bottom: 30px; }
.input-group input {
width: 100%; padding: 15px 10px; background: transparent; border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
color: #fff; font-size: 1.1rem; font-family: 'Rajdhani', sans-serif;
outline: none; transition: 0.3s;
}
.input-group label {
position: absolute; top: 15px; left: 0; color: rgba(255, 255, 255, 0.5);
pointer-events: none; transition: 0.3s; font-size: 1rem;
}
.input-group input:focus, .input-group input:valid {
border-bottom-color: #00ffff; text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}
.input-group input:focus ~ label, .input-group input:valid ~ label {
top: -20px; color: #00ffff; font-size: 0.8rem;
}
.input-group i {
position: absolute; right: 10px; top: 15px; color: #00ffff; opacity: 0.5;
}
/* Button */
.btn-glow {
width: 100%; padding: 15px; background: transparent;
color: #00ffff; border: 2px solid #00ffff;
font-family: 'Orbitron', sans-serif; font-size: 1rem; letter-spacing: 2px;
text-transform: uppercase; cursor: pointer; transition: 0.3s;
margin-top: 10px; font-weight: bold;
}
.btn-glow:hover {
background: #00ffff; color: #000; box-shadow: 0 0 20px #00ffff;
}
/* Footer & Orbs */
.footer-links { margin-top: 30px; display: flex; justify-content: space-between; font-size: 0.9rem; }
.footer-links a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: #fff; }
.orb {
position: absolute; border-radius: 50%; filter: blur(80px); z-index: 1; opacity: 0.6;
animation: floatOrb 10s infinite alternate;
}
.orb-1 { top: -10%; left: -10%; width: 300px; height: 300px; background: #7209b7; }
.orb-2 { bottom: -10%; right: -10%; width: 400px; height: 400px; background: #4361ee; }
@keyframes floatOrb {
0% { transform: translate(0, 0); } 100% { transform: translate(30px, 50px); }
}
3. The JavaScript Logic This is the engine room. This script handles the particle constellation effect and the 3D mouse tilt.
// --- 1. UNIVERSE PARTICLE SYSTEM ---
const canvas = document.getElementById('universe');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particlesArray;
class Particle {
constructor(x, y, directionX, directionY, size, color) {
this.x = x; this.y = y;
this.directionX = directionX; this.directionY = directionY;
this.size = size; this.color = color;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
}
update() {
if (this.x > canvas.width || this.x < 0) this.directionX = -this.directionX;
if (this.y > canvas.height || this.y < 0) this.directionY = -this.directionY;
this.x += this.directionX;
this.y += this.directionY;
this.draw();
}
}
function init() {
particlesArray = [];
let numberOfParticles = (canvas.height * canvas.width) / 9000;
for (let i = 0; i < numberOfParticles; i++) {
let size = (Math.random() * 2) + 0.1;
let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
let directionX = (Math.random() * 0.4) - 0.2;
let directionY = (Math.random() * 0.4) - 0.2;
let color = '#ffffff';
particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
}
}
function connect() {
let opacityValue = 1;
for (let a = 0; a < particlesArray.length; a++) {
for (let b = a; b < particlesArray.length; b++) {
let distance = ((particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x)) +
((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y));
if (distance < (canvas.width/7) * (canvas.height/7)) {
opacityValue = 1 - (distance / 20000);
ctx.strokeStyle = 'rgba(0, 255, 255,' + opacityValue + ')';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
ctx.stroke();
}
}
}
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, innerWidth, innerHeight);
for (let i = 0; i < particlesArray.length; i++) {
particlesArray[i].update();
}
connect();
}
// Mouse Interaction
window.addEventListener('resize', function(){
canvas.width = innerWidth;
canvas.height = innerHeight;
init();
});
init();
animate();
// --- 2. 3D TILT EFFECT ---
const container = document.getElementById('tiltContainer');
const card = document.getElementById('tiltCard');
document.addEventListener('mousemove', (e) => {
let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});
container.addEventListener('mouseenter', (e) => {
card.style.transition = 'none';
});
container.addEventListener('mouseleave', (e) => {
card.style.transition = 'all 0.5s ease';
card.style.transform = `rotateY(0deg) rotateX(0deg)`;
});
How It Works: A Quick Breakdown
If you are learning web development, here is a quick explanation of the logic I used:
The Particle System: I created a JavaScript class called Particle. The script generates hundreds of these particles on the <canvas>. The connect() function checks the distance between particles; if they are close enough, it draws a line between them.
The 3D Tilt: I tracked the mouse position using e.pageX and e.pageY. Then, I calculated the rotation degree and applied it to the CSS transform: rotateY() property of the login card.
Conclusion
I truly believe that small details like a unique login page can set the tone for your entire application. Using a futuristic login form HTML CSS design like this shows users that you care about the experience, not just the functionality.
Give this code a try and let me know in the comments how it looks on your screen!
