Pure HTML5 · CSS3 · Zero JavaScript · Animated Blobs · Glassmorphism · Free Download
The Ultra-Modern Login Form 2025 is a free login page template built entirely with pure HTML5 and CSS3 — no JavaScript, no React, no jQuery, and no libraries required.
It features 3 animated floating blurred blob shapes (purple, blue, and cyan) using filter: blur(160px) and CSS @keyframes animation, a deep indigo gradient background, a glassmorphism form panel with backdrop-filter: blur(36px), glowing inputs with a scale(1.02) focus animation, and a bold gradient glow button.
It is the most futuristic free CSS login page available in 2025 — completely free to download and use instantly.
Purple, blue & cyan CSS blur shapes with 18–22s float keyframe animations
Dark navy to deep purple (#0b0f26 → #2a2373) full-viewport background
backdrop-filter: blur(36px) with dark semi-transparent card background
Purple gradient panel (#995bff → #2e2355) with glowing headline text
Focus triggers box-shadow glow AND transform: scale(1.02) for premium feel
Gradient button with 30px glow shadow and hover scale(1.05) transform
Panels reorder on mobile with media queries at 920px and 460px
Pure HTML5 and CSS3 only — no libraries, frameworks, or dependencies
Single HTML file, opens in any browser instantly with no build tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ultra-Modern Stylish Login Page 2025</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; }
body, html {
margin: 0; padding: 0; min-height: 100vh;
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0b0f26 30%, #2a2373 100%);
display: flex; justify-content: center; align-items: center;
color: #e0e8ff; overflow: hidden;
}
.blob {
position: fixed; border-radius: 50%; filter: blur(160px);
opacity: 0.45; animation: float 18s ease-in-out infinite;
pointer-events: none; z-index: 0;
}
.blob1 { width: 500px; height: 500px; background: #9b5eff; top: 5%; left: -250px; animation-duration: 21s; }
.blob2 { width: 420px; height: 420px; background: #3f86f5; top: 45%; right: -210px; animation-duration: 16s; animation-delay: 9s; }
.blob3 { width: 460px; height: 460px; background: #5ee1ff; bottom: -170px; left: 15%; animation-duration: 22s; animation-delay: 7s; }
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-70px) translateX(45px); }
}
.container {
display: flex; max-width: 960px; width: 90vw; border-radius: 34px;
overflow: hidden; background: rgba(18,15,41,0.85);
box-shadow: 0 24px 60px rgba(0,0,0,0.8); z-index: 1;
}
.left-panel {
flex: 1.3; background: linear-gradient(135deg, #995bff 0%, #2e2355 100%);
padding: 72px 50px; display: flex; flex-direction: column; justify-content: center;
}
.left-panel h2 {
font-size: 3.4rem; font-weight: 900; margin: 0 0 20px;
letter-spacing: 0.1em; line-height: 1.05; text-shadow: 0 0 18px #b289ffcc;
}
.left-panel p { font-size: 1.25rem; color: #cdbaffcc; line-height: 1.5; }
.right-panel {
flex: 1; background: rgba(255 255 255 / 0.1); backdrop-filter: blur(36px);
padding: 80px 56px; display: flex; flex-direction: column; justify-content: center;
}
.right-panel h1 {
font-size: 3rem; font-weight: 900; margin: 0 0 40px; color: #d0d6ffcc;
text-shadow: 0 0 14px #8263ffcc; letter-spacing: 0.09em; text-align: center;
}
form { display: flex; flex-direction: column; }
label { margin-bottom: 7px; font-weight: 700; font-size: 1.1rem; color: #b4bbffcc; }
input[type="email"], input[type="password"] {
padding: 20px 24px; font-size: 1.15rem; border-radius: 24px; border: none;
background: rgba(255 255 255 / 0.3); color: #221c4d; margin-bottom: 36px;
transition: all 0.3s ease; font-weight: 700;
}
input::placeholder { font-style: italic; color: #9ea6ffcc; }
input:focus {
background: #cecfff; box-shadow: 0 0 26px 8px #8664ff;
outline: none; transform: scale(1.02); color: #271f57;
}
button {
padding: 22px 0; border-radius: 30px; font-size: 1.4rem; font-weight: 900;
border: none; cursor: pointer;
background: linear-gradient(135deg, #8466ff 0%, #3b21b3 100%);
color: #eaeaff; box-shadow: 0 0 30px 10px #5e45e6;
transition: background 0.4s ease, box-shadow 0.3s ease, transform 0.25s ease;
}
button:hover, button:focus {
background: linear-gradient(135deg, #3b21b3 0%, #8466ff 100%);
box-shadow: 0 0 54px 18px #8f73ff; outline: none; transform: scale(1.05);
}
@media (max-width: 920px) {
.container { flex-direction: column; height: auto; border-radius: 28px; }
.left-panel { order: 2; padding: 48px 40px; text-align: center; }
.left-panel h2 { font-size: 2.6rem; }
.right-panel { order: 1; padding: 40px 30px; }
}
@media (max-width: 460px) {
.right-panel h1 { font-size: 2.4rem; }
input[type="email"], input[type="password"] { font-size: 1.05rem; }
button { font-size: 1.2rem; }
}
</style>
</head>
<body>
<div class="blob blob1" aria-hidden="true"></div>
<div class="blob blob2" aria-hidden="true"></div>
<div class="blob blob3" aria-hidden="true"></div>
<div class="container" role="main" aria-label="Login screen">
<section class="left-panel" aria-hidden="true">
<h2>Join Our Platform</h2>
<p>Experience an ultra-smooth, secure, and beautiful login with modern UI trends of 2025.</p>
</section>
<section class="right-panel">
<h1>Sign In</h1>
<form action="#" method="POST" autocomplete="off" novalidate>
<label for="email">Email or Username</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required autocomplete="username" autofocus />
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="••••••••" required autocomplete="current-password" />
<button type="submit">Log In</button>
</form>
</section>
</div>
</body>
</html>
Free forever. Instant setup. Floating blobs + glassmorphism in one HTML file.
Trusted by 50,000+ developers worldwide · CC BY 4.0 License · No Registration